表单样式简单设计
时间:2022-04-22
本文章向大家介绍表单样式简单设计,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
虽然作为后端程序员,简单的CSS样式还是要会滴,备份下
1.直接贴代码吧:
@{
ViewBag.Title = "Index";
Layout = null;
}
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style type="text/css">
.box-wrap {
padding: 20px;
width: 2000px;
}
.box-wrap > div {
padding: 0 0 10px;
font-size: 14px;
color: #333;
}
.box-wrap > div span {
display: inline-block;
margin-right: 5px;
}
.box-wrap > div label {
display: inline-block;
}
.box-wrap > div input {
border-radius: 3px;
padding: 4px 10px;
font-size: 14px;
width: 200px;
border: 1px solid #e0e0e0;
}
.box-wrap > div select {
border: 1px solid #e0e0e0;
padding: 4px;
margin-right: 5px;
min-width: 100px;
}
.box-wrap .box-checkbox label {
margin-bottom: 10px;
margin-right: 10px;
width: 330px;
}
.box-wrap .box-checkbox input {
width: auto;
vertical-align: baseline;
margin-right: 3px;
}
.btnSave button {
border: none;
background: #507fff;
width: 150px;
height: 35px;
line-height: 35px;
color: #fff;
border-radius: 3px;
font-size: 16px;
margin: auto;
display: block;
margin-top: 30px;
}
</style>
<div class="box-wrap">
<div><span>级别:</span><label>3</label></div>
<div><span>标题:</span><label><input id="txtName"></label></div>
<div>
<span>子级:</span>
<label>
<select id="twoSelect">
<option value="-1">请选择0 级车型库</option>
</select>
<select id="twoSelect">
<option value="-1">请选择1级车型库</option>
</select>
<select id="threeSelect">
<option value="-1">请选择2级车型库</option>
</select>
</label>
</div>
<div id="content">
<div class="box-checkbox">
</div>
</div>
<div class="btnSave"><button id="btnSave">保存</button></div>
</div>
<script>
$(function () {
var getId = $(this).val();
var r = { "success": true, "fourList": [{ "fourId": 18637, "fourName": "2014款 Sportback 35 TFSI 自动进取型" }, { "fourId": 18638, "fourName": "2014款 Sportback 35 TFSI 自动时尚型" }, { "fourId": 18639, "fourName": "2014款 Sportback 35 TFSI 自动舒适型" }, { "fourId": 16571, "fourName": "2014款 Sportback 35 TFSI 自动豪华型" }, { "fourId": 20245, "fourName": "2014款 Limousine 35 TFSI 自动进取型" }, { "fourId": 20246, "fourName": "2014款 Limousine 35 TFSI 自动时尚型" }, { "fourId": 20247, "fourName": "2014款 Limousine 35 TFSI 自动舒适型" }, { "fourId": 20248, "fourName": "2014款 Limousine 35 TFSI 自动豪华型" }, { "fourId": 18658, "fourName": "2015款 Sportback 35 TFSI 手动进取型" }, { "fourId": 21567, "fourName": "2015款 Sportback 40 TFSI 自动舒适型" }, { "fourId": 21568, "fourName": "2015款 Sportback 40 TFSI 自动豪华型" }, { "fourId": 21598, "fourName": "2015款 Limousine 35 TFSI 手动进取型" }, { "fourId": 21569, "fourName": "2015款 Limousine 40 TFSI 自动舒适型" }, { "fourId": 21570, "fourName": "2015款 Limousine 40 TFSI 自动豪华型" }, { "fourId": 22883, "fourName": "2015款 Sportback 35 TFSI 百万纪念智领型" }, { "fourId": 22884, "fourName": "2015款 Limousine 35 TFSI 百万纪念智领型" }, { "fourId": 22885, "fourName": "2015款 Sportback 35 TFSI 百万纪念舒享型" }, { "fourId": 22886, "fourName": "2015款 Limousine 35 TFSI 百万纪念舒享型" }, { "fourId": 22887, "fourName": "2015款 Sportback 35 TFSI 百万纪念乐享型" }, { "fourId": 22888, "fourName": "2015款 Limousine 35 TFSI 百万纪念乐享型" }, { "fourId": 25898, "fourName": "2016款 Sportback 35 TFSI 进取型" }, { "fourId": 25899, "fourName": "2016款 Sportback 35 TFSI 领英型" }, { "fourId": 25900, "fourName": "2016款 Sportback 35 TFSI 风尚型" }, { "fourId": 25901, "fourName": "2016款 Sportback 40 TFSI 风尚型" }, { "fourId": 25902, "fourName": "2016款 Sportback 40 TFSI 豪华型" }, { "fourId": 25903, "fourName": "2016款 Limousine 35 TFSI 进取型" }, { "fourId": 25904, "fourName": "2016款 Limousine 35 TFSI 领英型" }, { "fourId": 25905, "fourName": "2016款 Limousine 35 TFSI 风尚型" }, { "fourId": 25906, "fourName": "2016款 Limousine 40 TFSI 风尚型" }, { "fourId": 25907, "fourName": "2016款 Limousine 40 TFSI 豪华型" }, { "fourId": 27076, "fourName": "2016款 Sportback 35 TFSI 特别版" }, { "fourId": 27078, "fourName": "2016款 Limousine 35 TFSI 特别版" }] };
var html = '';
$.each(r.fourList, function (index, ele) {
html += '<label>' + ele.fourName + '<input name="idck" type="checkbox" id="' + ele.fourId + '"/></label>';
})
$(".box-checkbox").html(html);
})
</script>
2.效果:
- excel导出类
- 我的HTML总结之常用基础便签
- php性能监测模块XHProf
- php dirname(__FILE__) 获取当前文件的绝对路径
- 洛谷P2939 [USACO09FEB]改造路Revamping Trails(最短路)
- 微信公众平台开发接口PHP SDK完整版
- 我的HTML总结之HTML发展史
- BZOJ 4152: [AMPPZ2014]The Captain(最短路)
- js获取div编辑框,textarea,input text的光标位置,兼容FF和IE
- BZOJ 4289: PA2012 Tax(最短路)
- php QR Code二维码生成类
- BZOJ 3714: [PA2014]Kuglarz(最小生成树)
- 我的HTML总结之表单
- php 二维码生成类
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 基于docker搭建DNSmasq
- Django-admin配置和显示图标
- redis学习(八)
- 【剑指Offer】打印从1到最大的n位数
- 面试题-List之ArrayList、Vector、SynchronizedList、CopyOnWriteArrayList
- 面试题-JAVA设计模式之单例模式的5种实现方式
- 面试题-JAVA中的深拷贝、浅拷贝原理及实现
- Cross-Origin Resource Sharing (CORS)-跨域
- 多线程技术-CountDownLatch在业务中实践
- Mybatis源码阅读-准备环境搭建
- 【SpringBoot WebFlux 系列】WebFlux 之 Path 参数解析与 url 映射
- Oracle的expdp和impdp的使用方法
- python中的密度图与柱状图
- 单细胞数据(scRNAseq)可以做GSEA吗?
- mybatis-plus的collection、association 标签传递多参数