8、給表格添加樣式:
table{
/*設置表格的寬度*/
width: 300px;
/*居中*/
margin: 0 auto;
/*邊框*/
/*border:1px solid black;*/
/*table和td邊框之間默認有一個距離，通過border-spacing屬性可以設置這個距離*/
/*border-spacing: 10px;*/
/*
border-collapse可以用來設置表格的邊框合并
如果設置了邊框合并，則border-spacing自動失效
*/
border-collapse: collapse;
/*設置背景樣式*/
/*background-color: #bfa;*/
}
/*設置邊框*/
th, td{
border: 1px solid black;
}
/*設置隔行變色*/
tbody > tr:nth-child(even){
background-color: #bfa;
}
/*鼠標移入到tr以后，改變顏色*/
tr:hover{
background-color: yellow;
}
</style>
</head>
<body>
<table>
<tr>
<!--
可以使用th標簽來表示表頭中的內(nèi)容，
它的用法和td一樣，不同的是它會有一些默認效果
-->
<th>學號</th>
<th>姓名</th>
<th>性別</th>
<th>住址</th>
</tr>
<tr>
<td>1</td>
<td>孫悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
9、長表格
有一些情況下表格是非常的長的，這時就需要將表格分為三個部分，表頭，表格的主體，表格底部
在HTML中為我們提供了三個標簽：
thead 表頭
tbody 表格主體
tfoot 表格底部
這三個標簽的作用，就來區(qū)分表格的不同的部分，他們都是table的子標簽，都需要直接寫到table中，tr需要寫在這些標簽當中
thead中的內(nèi)容，永遠會顯示在表格的頭部
tfoot中的內(nèi)容，永遠都會顯示表格的底部
tbody中的內(nèi)容，永遠都會顯示表格的中間
如果表格中沒有寫tbody，瀏覽器會自動在表格中添加tbody
并且將所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
通過table > tr 無法選中行 需要通過tbody > tr
完善clearfix
.clearfix:after{
content="";
display=block;
clear:both;
}
當天雪碧圖做購物車作業(yè)如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>購物車logo</title>
<style type="text/css">
.btn{
display: block;
width: 41px;
height: 28px;
background-image: url("../css/amazon-sprite_.png");
background-repeat: no-repeat;
}
.btn:link{
background-image: url("../css/amazon-sprite_.png");
background-position: -10px -340px
}
.btn:hover{
background-image: url("../css/amazon-sprite_.png");
background-position: -58px -339px;
}
.btn:active{
background-image: url("../css/amazon-sprite_.png");
background-position: -126px -339px;
}
</style>
</head>
<body>
<a href="#" class="btn"></a>
</body>
</html>
