一.表格标签与属性
1.表格的新增html属性
1）valign=“top/middle/bottom/baseline”垂直对齐
2）rules=“groups（添加行组与行组和列组和列组之间的分割线）/rows（添加行之间的分割线）/cols（添加列之间的分割线）/all（位于行列之间的线）/none（没有线条）（注意：这个属性添加到table标签里）
行组分组：thead tbody tfoot
一个表格只有一个thead，一个tfoot，但是可以有多个tbody。
如果你有thead的时候，就一定要有tfoot，tbody
列分组：<colgroup span="4"></colgroup>
span="value"表示value列为一组。
注意点：colgroup标签写在tr标签同级，你想要多少组就写多少个colgroup标签，必须要在table标签里写rules=“groups”一起使用；
col与colgroup的区别：col不能与rules=“groups”一起使用。
2.表格新增css属性
1）border-spacing：value；单元格间距；
2）合并相邻单元格边框：border-collapse：separate（分开，默认值）/collapse（边框合并）；
3）无内容时单元格的设置：empty-cells：show/hide；
定义当单元无内容时，是否显示该单元格的边框区域。注意：边框不合并的时候，才能能看到效果；
4）表格标题的位置：caption-side：top/right/bottom/left；注意：left和right只有火狐浏览器才能识别。
二、高级表单
1.表单新增元素
1）表单字段集：
语法：<fieldset></fieldset>（可以嵌套）
说明：相当于同一个框，该元素用于对表单中的元素进行分组。
2）字段集标题
语法：<legend align="left/center/right/justify"></legend>（字段集标题位置）
说明：legend元素可以在fieldset对象绘制标题。legend必须是fieldset元素内的第一个元素。
3）提示信息的标签
语法：<label for=""></label>
说明：label元素用来定义标签，为元素指定提示信息。
要使label与input有关联，给input一个id，label的for属性值input的id名
<label for="username"></label>
<input type="text" name="username" id="username">
4)文件上传框（工作中很多时候会用）
<input type="file" multiple>如果要选择多张图片，就要添加multiple
5）图像域
<input type="image" src="图片路径">图片可做为按钮
表格的案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
border: 1px solid black;
}
table td {
border: none;
}
tbody tr {
text-align: center;
}
tbody .first {
text-align: left;
}
thead tr {
background-color: #0047e1;
color: white
}
tbody tr:nth-child(odd) {
background: #fef0f5;
}
tbody tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<table width="600px" height="244px" cellspacing="0">
<caption>2007年全国非邮发报刊联合征订目录</caption>
<thead>
<tr class="hang">
<th>代号</th>
<th>刊名</th>
<th>刊期</th>
<th>出版地</th>
<th>年定价</th>
<th>CH号</th>
</tr>
</thead>
<tbody>
<tr class="first" style="background: #7e9de5">
<td colspan="6">A马列主义毛泽东思想</td>
</tr>
<tr>
<td>0001</td>
<td>马克思主义研究</td>
<td>月刊</td>
<td>北京</td>
<td>144.0</td>
<td>11-3911</td>
</tr>
<tr>
<td>0001</td>
<td>马克思主义研究</td>
<td>月刊</td>
<td>北京</td>
<td>144.0</td>
<td>11-3911</td>
</tr>
<tr>
<td>0001</td>
<td>马克思主义研究</td>
<td>月刊</td>
<td>北京</td>
<td>144.0</td>
<td>11-3911</td>
</tr>
<tr>
<td>0001</td>
<td>马克思主义研究</td>
<td>月刊</td>
<td>北京</td>
<td>144.0</td>
<td>11-3911</td>
</tr>
</tbody>
<tbody>
<tr class="first" style="background: #7e9de5">
<td colspan="6">B哲学、美学、心理学、宗教</td>
</tr>
<tr>
<td>0001</td>
<td>马克思主义研究</td>
<td>月刊</td>
<td>北京</td>
<td>144.0</td>
<td>11-3911</td>
</tr>
<tr>
<td>0001</td>
<td>马克思主义研究</td>
<td>月刊</td>
<td>北京</td>
<td>144.0</td>
<td>11-3911</td>
</tr>
<tr>
<td>0001</td>
<td>马克思主义研究</td>
<td>月刊</td>
<td>北京</td>
<td>144.0</td>
<td>11-3911</td>
</tr>
<tr>
<td>0001</td>
<td>马克思主义研究</td>
<td>月刊</td>
<td>北京</td>
<td>144.0</td>
<td>11-3911</td>
</tr>
<tr>
<td>0001</td>
<td>马克思主义研究</td>
<td>月刊</td>
<td>北京</td>
<td>144.0</td>
<td>11-3911</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>高级表单案例：主要写的是内联样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
legend {
width: 76px;
height: 23px;
line-height: 23px;
padding-left: 18px;
color: #477781;
font-weight: 600;
border: 1px solid #cccccc;
}
p {
font-size: 10px;
color: #486c82;
}
</style>
</head>
<body>
<form action="" method="GET">
<fieldset style="width: 500px;margin: 0 auto;">
<h2>已注册用户名</h2>
<fieldset>
<legend>用户登录</legend>
<p><label for="username" style="width: 150px;text-align: right;display: inline-block;">用户名</label>
<input type="text" id="username">
</p>
<p> <label for="password" style="width: 150px;text-align: right;display: inline-block;">密码 </label>
<input type="password" id="password">
</p>
<p><input type="checkbox" style="background-color: #d0f0fd;margin-left: 90px">
<label style="text-decoration: underline">记住我</label>
<input type="button" value="登录" style="background-color: #d0f0fd;"></p>
<a href="" style="color: skyblue;font: size 10px;text-decoration: none; ">你忘记密码？</a>
</fieldset>
<h2>未注册创建账户</h2>
<fieldset>
<legend>用户注册</legend>
<p>你的电子邮箱不会被公布出去，但是必须填写。
<span>请你在阅读之前认真阅读服务条款</span></p>
<p><label for="username" style="width: 150px;text-align: right;display: inline-block;">用户名</label>
<input type="text" id="username">*(最多30个字符)</p>
<p><label for="email" style="width: 150px;text-align: right;display: inline-block;">电子邮箱</label>
<input type="email" id="email"></p>
<p><label for="password1" style="width: 150px;text-align: right;display: inline-block;">密码</label>
<input type="password" id="password1">（*最多15个字符）</p>
<p><label for="password2" style="width: 150px;text-align: right;display: inline-block;">重复密码</label>
<input type="password" id="password2"></p>
<span style="margin-left: 63px;">同意服务条约</span>
<input type="checkbox"><a href="" style="color: skyblue;font: size 10px;text-decoration: none; ">先看看条款?</a> <br>
<input type="submit" value="提交" style="background-color: #d0f0fd;margin-left: 157px">
<input type="reset" value="重置" style="background-color: #d0f0fd;">
<p>*在提交你的注册信息时，我们认为您已经同意了我们的服务条款</p>
<p>*这些条款可能在未经您同意的时候进行修改。</p>
</fieldset>
</fieldset>
</form>
</body>
</html>管理系统的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div class="top">
<span>农业部观测站物联网数据采集与管理系统</span>
<div class="top-right">
<div class="top-right-top">
<ul class="fr" style="background-color: beige;margin-right: 30px;
border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; ">
<li class="li1">欢迎您：admin！</li>
<li class="li2">退出</li>
</ul>
</div>
<div class="top-right-bottom">
<ul class="menu1">
<li><img src="../images/n1.png" alt="">
<ul class="menu2">
<li>数据采集</li>
</ul>
</li>
<li><img src="../images/n2.png" alt="">
<ul class="menu2">
<li>数据展示</li>
</ul>
</li>
<li><img src="../images/n3.png" alt="">
<ul class="menu2">
<li>实验管理</li>
</ul>
</li>
<li><img src="../images/n4.png" alt="">
<ul class="menu2">
<li>数据同步</li>
</ul>
</li>
<li><img src="../images/n5.png" alt="">
<ul class="menu2">
<li>设备管理</li>
</ul>
</li>
<li><img src="../images/n6.png" alt="">
<ul class="menu2">
<li>数据分析</li>
</ul>
</li>
<li><img src="../images/n7.png" alt="">
<ul class="menu2">
<li>系统管理</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="main">
<div class="left">
<div class="left-top">
<img src="../images/e_01.jpg" alt="">
</div>
<ul class="nav1">
<li><a href="">设备信息</a>
<ul class="nav2">
<li><a href="">所有设备</a></li>
<li><a href="">正常设备</a></li>
<li><a href="">异常设备</a></li>
<li><a href="">共享设备</a></li>
</ul>
</li>
<li><a href="">设备接口</a></li>
<li><a href="">集成设备</a></li>
</ul>
</div>
<div class="right">
<div class="right-top">
<ul>
<li class="first">当前位置>></li>
<li>设备管理>></li>
<li>设备信息>></li>
<li>正常设备</li>
</ul>
</div>
<div class="right-middle">
<ul>
<li>搜索</li>
</ul>
<p>
<label for="text1">设备名称：</label><input type="text" id="text1">
<label for="text2">设备类型：</label><input type="text" id="text2" value="-请选择-"></p>
<select name="" id="">
<option value=""></option>
</select>
<button style="position: absolute;top: 16px;left: 510px;width: 40px;height: 25px;">查询</button>
</div>
<div class="right-bottom">
<table class="table1" rules="rows" cellspacing="0" cellpadding="10px" width="1060px">
<thead>
<tr>
<th><input type="checkbox">全选</th>
<th>设备类型</th>
<th>设备名称</th>
<th>设备编号</th>
<th>创建日期</th>
<th>设备状态</th>
<th>是否共享</th>
<th>修改</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>网络视频摄像头</td>
<td>Camera001</td>
<td>2131313</td>
<td>2005/04/25</td>
<td><img src="../images/device-1.png" alt=""></td>
<td><img src="../images/share-2.png" alt=""></td>
<td><img src="../images/equi-icon2.png" alt=""></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>网络视频摄像头</td>
<td>Camera001</td>
<td>2131313</td>
<td>2005/04/25</td>
<td><img src="../images/device-1.png" alt=""></td>
<td><img src="../images/share-2.png" alt=""></td>
<td><img src="../images/equi-icon2.png" alt=""></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>网络视频摄像头</td>
<td>Camera001</td>
<td>2131313</td>
<td>2005/04/25</td>
<td><img src="../images/device-1.png" alt=""></td>
<td><img src="../images/share-2.png" alt=""></td>
<td><img src="../images/equi-icon2.png" alt=""></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>网络视频摄像头</td>
<td>Camera001</td>
<td>2131313</td>
<td>2005/04/25</td>
<td><img src="../images/device-1.png" alt=""></td>
<td><img src="../images/share-2.png" alt=""></td>
<td><img src="../images/equi-icon2.png" alt=""></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>网络视频摄像头</td>
<td>Camera001</td>
<td>2131313</td>
<td>2005/04/25</td>
<td><img src="../images/device-1.png" alt=""></td>
<td><img src="../images/share-2.png" alt=""></td>
<td><img src="../images/equi-icon2.png" alt=""></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>网络视频摄像头</td>
<td>Camera001</td>
<td>2131313</td>
<td>2005/04/25</td>
<td><img src="../images/device-1.png" alt=""></td>
<td><img src="../images/share-2.png" alt=""></td>
<td><img src="../images/equi-icon2.png" alt=""></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>网络视频摄像头</td>
<td>Camera001</td>
<td>2131313</td>
<td>2005/04/25</td>
<td><img src="../images/device-1.png" alt=""></td>
<td><img src="../images/share-2.png" alt=""></td>
<td><img src="../images/equi-icon2.png" alt=""></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>网络视频摄像头</td>
<td>Camera001</td>
<td>2131313</td>
<td>2005/04/25</td>
<td><img src="../images/device-1.png" alt=""></td>
<td><img src="../images/share-2.png" alt=""></td>
<td><img src="../images/equi-icon2.png" alt=""></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>网络视频摄像头</td>
<td>Camera001</td>
<td>2131313</td>
<td>2005/04/25</td>
<td><img src="../images/device-1.png" alt=""></td>
<td><img src="../images/share-2.png" alt=""></td>
<td><img src="../images/equi-icon2.png" alt=""></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>网络视频摄像头</td>
<td>Camera001</td>
<td>2131313</td>
<td>2005/04/25</td>
<td><img src="../images/device-1.png" alt=""></td>
<td><img src="../images/share-2.png" alt=""></td>
<td><img src="../images/equi-icon2.png" alt=""></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
<table class="table2">
<tr>
<td width="850px">共20行数据，当前第一页</td>
<td>首页<img src="../images/shuzi_03.png" alt="">首页 下一页</td>
</tr>
</table>
</div>
</div>
</body>
</html>main.css
.top {
position: fixed;
height: 90px;
left: 0;
right: 0;
top: 0;
background-color: #7ab5e9;
}
.top span {
position: fixed;
float: left;
color: white;
font-size: 25px;
line-height: 90px;
}
.top .top-right {
float: right;
width: 713px;
height: 90px;
}
.top-right-top ul li {
float: left;
font-size: 12px;
color: #6d6d6d;
margin-left: 5px;
}
.top-right-top ul .li1 {
list-style: url(../images/dl.png) inside;
}
.top-right-top ul .li2 {
list-style: url(../images/tc.png)inside;
}
.top-right-bottom {
position: fixed;
bottom: 0;
right: 30px;
top: 33px;
width: 667px;
height: 57px;
}
.top-right-bottom li {
font-size: 13px;
color: #ddfaff;
text-align: center;
width: 95px;
float: left;
margin-top: 6px;
}
.top-right-bottom .menu1>li:hover {
background: url(../images/libj.png) left center;
}
.main {
position: fixed;
top: 90px;
left: 0;
bottom: 0;
right: 0;
}
.left {
position: fixed;
top: 90px;
left: 0;
bottom: 0;
width: 200px;
background-color: #417ec8;
}
.nav1>li {
margin: 10px 0 0 20px;
}
.nav1>li:nth-child(1) {
list-style: url(../images/left_01.jpg) inside;
}
.nav1>li:nth-child(2) {
list-style: url(../images/left_02.jpg) inside;
}
.nav1>li:nth-child(3) {
list-style: url(../images/left_03.jpg) inside;
}
.nav1>li a {
color: white;
}
.nav1>li:hover>a {
color: black
}
.nav1>li:hover .nav2 {
display: block;
}
.nav1>li:hover .nav2>li {
margin: 10px 0 10px 15px;
list-style: url(../images/jiantou_03.png) inside;
}
.nav2 {
display: none;
}
.right {
position: fixed;
top: 90px;
left: 200px;
right: 0;
bottom: 0;
background-color: #ffffff;
}
.right-top {
position: absolute;
height: 25px;
top: 0;
left: 0;
right: 0;
border-bottom: 1px solid #ccc;
}
.right-top ul li {
float: left;
text-align: center;
line-height: 25px;
font-size: 14px;
color: #63637b;
}
.right-top ul .first {
list-style: url(../images/xiaosanjiao_03.png) inside;
}
.right .right-middle {
position: absolute;
top: 25px;
left: 0;
right: 0;
height: 55px;
}
.right .right-middle ul {
text-align: center;
line-height: 55px;
float: left;
}
.right .right-middle ul li {
font-size: 15px;
list-style: url(../images/big_03.png) inside;
}
.right .right-middle p input {
width: 138px;
height: 23px;
border: 1px solid #ccc;
}
.right .right-middle p {
float: left;
line-height: 55px;
margin-left: 10px;
font-size: 14px;
}
.right .right-middle select {
position: absolute;
top: 16px;
left: 473px;
width: 24px;
height: 25px;
background-color: #f1f1f1;
}
.right-bottom {
position: absolute;
top: 80px;
left: 0;
right: 0;
bottom: 0;
}
.right-bottom .table1 {
border: 1px solid #e3e3e3;
}
.right-bottom .table1 tr {
text-align: center;
}
.right-bottom thead tr {
background-color: #f1f1f1;
}
.right-bottom tbody tr:nth-child(odd) {
background-color: #ffffff;
}
.right-bottom tbody tr:nth-child(even) {
background-color: #f1f1f1;
}bass.css
/*(1)清除默认样式*/
html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
img,
input {
margin: 0;
padding: 0;
}
fieldset,
img,
input,
button {
border: 0 none;
padding: 0;
margin: 0;
outline-style: none;
}
/*去掉input等聚焦时的蓝色边框*/
ul,
li,
ol {
list-style: none;
}
/* 行内元素的垂直居中 */
/*
vertical-align：top
*/
select,
input {
vertical-align: middle;
}
/*select, input, textarea { font-size:12px; margin:0; }*/
textarea {
resize: none;
}
/*防止拖动*/
img {
border: 0;
vertical-align: middle;
}
/* 去掉图片低测默认的3像素空白缝隙，或者用display：block也可以*/
/* table { border-collapse:collapse; } */
a {
text-decoration: none;
}
/*（2）添加公共样式*/
/*body {
font:12px Arial,Verdana,"\5b8b\4f53";
color:#666;
background:#fff;
}*/
/*清除浮动（不管）*/
.clearfix:before,
.clearfix:after {
/*清楚浮动*/
content: "";
height: 0;
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
/*IE/7/6*/
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
font-size: 1em;
}
/*设置h标签的大小，设置跟父亲一样大的字体font-size:100%;*/
s,
i,
em {
font-style: normal;
text-decoration: none;
}
/*公共类*/
.container {
/*内容、版心 提取 */
width: 1000px;
/*100%是继承父元素的高或者宽*/
height: 100%;
/* background-color:yellow; */
margin: 0 auto;
}
.fl {
float: left;
}
.fr {
float: right;
}
.ac {
text-align: center;
}
.f12 {
font-size: 12px;
}
.f14 {
font-size: 14px;
}
.f16 {
font-size: 16px;
}
126
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
