三十四、美化表格
代码
<html>
<head>
<meta content="text/html;charset=utf-8">
<title>美化表格</title>
<style>
tbody tr{background-color: #cccccc;}
thead tr,tfoot tr{background: white;}
td,th{
padding: 5px;
border: 2px #ccc solid;
border-bottom-color: #666;
border-right-color: #666;
}
td+td+td{text-align:right;}
</style>
</head>
<body>
<table cellspacing="0">
<thead>
<tr>
<th>product</th>
<th>ID</th>
<th>Country</th>
<th>Price</th>
<th>Color</th>
<th>Weight</th>
</tr>
</thead>
<tbody>
<tr>
<td>Computer</td>
<td>C184645</td>
<td>China</td>
<td>$3200.00</td>
<td>Black</td>
<td>5.20kg</td>
</tr>
<tr>
<td>TV</td>
<td>T965874</td>
<td>Germany</td>
<td>$299.95</td>
<td>White</td>
<td>15.20kg</td>
</tr>
<tr>
<td>Phone</td>
<td>P494783</td>
<td>France</td>
<td>$34.80</td>
<td>Green</td>
<td>0.90kg</td>
</tr>
<tr>
<td>Recorder</td>
<td>R349576</td>
<td>China</td>
<td>$111.99</td>
<td>Sliver</td>
<td>0.30kg</td>
</tr>
<tr>
<td>Washer</td>
<td>W454783</td>
<td>Japan</td>
<td>$240.80</td>
<td>White</td>
<td>30.90kg</td>
</tr>
<tr>
<td>Freezer</td>
<td>F783990</td>
<td>China</td>
<td>$191.68</td>
<td>blue</td>
<td>32.80kg</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<th colspan="5">6 products</th>
</tr>
</tfoot>
</table>
</body>
<html>
知识点
- “<标记>+<标记>”为邻接选择器形式,标记间(紧随其后的)相邻方可触发
扩展
- 添加CSS样式:tr{cursor:pointer;}
答案:cursor鼠标经过时手势,值:pointer/crosshair/text/help
三十五、伪类
代码
(在三十四-扩展1基础上)添加CSS属性:tr td:hover{background:aqua;border:2px aqua solid;}
知识点
- CSS伪类:达到动作条件时会触发,用以实现动态效果
- 样式:
(1):link:来访问时(仅对有效)
(2):visited:已访问时(仅对有效)
(3):hover:鼠标经过时
(4):active:鼠标点击时
扩展
- 添加CSS属性:th:hover{border-bottom-color:#EEE;border-right-color:#EEE;border-top-color:#666;border-left-color:#666;}
答案:可通过改变边框颜色来实现凹凸感