简写背景属性：
background:#bfa url(img/123.png) center no-repeat fixed;(无顺序要求)
表格：
<th>表头标签 会加粗
<table>
<tr>
<td>a</td>(单元格)
</tr>
</table>
有几行写几行tr
align=center居中
横合并单元格：colspan <td colspan='2'>D3</td>
纵合并单元格：rowspan <td rowspan='2'>D4</td>
table是块元素
border-spacing:0px; 表内单线
border-collapse:collapse; 表格边框合并
奇数行变红
tr:nth-child(odd){
background-color:red;
}
even偶数
移到变蓝
tr:hover{
background-color:blue;
}
tr不是table直接子元素，是tbody直接子元素
长表格
<table>
<thead></thead> 放表头
<tbody></tbody>
<tfoot></tfoot>
</table>
表格列数由td最多的一行决定
表单：用来向服务器提交信息的
input使用最多的表单项
type属性可选值：
text:文本框
password:密码框
submit:提交按钮
radio:单选按钮
checkbox:多选框
reset:重置选框
select:创建一个下拉列表
option:下拉列表中列表项
optgroup:为列表项分组
作业：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻页</title>
<style type="text/css">
/{
margin:0px;
padding:0px;
}/
.box1{
width: 960px;
height: 42px;
background-color: #ffffff;
border:1px red solid;
margin:0 auto;
}
.box2{
width: 50%;
background-color: #ffffff;
margin:0 auto;
}
.a{
/width: 50px;
height: 20px;/
display:inline-block;
background-color: gold;
font:black 12px '微软雅黑';
padding:5px 10px;
/ float:left;/
margin:5px auto;
/text-align:center;*/
text-decoration: none;
}
</style>
</head>
<body>
<div class='box1'>
<div class='box2'>
<div class='a'>
<a href="#">上一页</a>
</div>
<div class='a'>
<a href="#">1</a>
</div>
<div class='a'>
<a href="#">2</a>
</div>
<div class='a'>
<a href="#">3</a>
</div>
<div class='a'>
<a href="#">4</a>
</div>
<span>...</span>
<div class='a'>
<a href="#">17</a>
</div>
<div class='a'>
<a href="#">18</a>
</div>
<div class='a'>
<a href="#">19</a>
</div>
<div class='a'>
<a href="#">20</a>
</div>
<div class='a'>
<a href="#">下一页</a>
</div>
</div>
</div>
</body>
</html>
网友评论