作者:LAMP小白 点击:2626 发布日期:2013-06-10 01:08:29 返回列表
使用CSS翻转器(rollovers)可以节省客户端CPU消耗
并提高页面的可靠性
两个翻转器的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style>
table {
background-color:#fff;
border:1px solid #ddd;
empty-cells:show;
font-size:90%;
margin: 0 0 20px 0;
padding:4px;
text-align:left;
width:300px;
}
table caption {
color:#777;
margin:0 0 5px 0;
padding:0;
text-align:center;
text-transform:uppercase;
}
table thead th {
border:0;
border-bottom:1px solid #ddd;
color:#777;
font-size:90%;
padding:3px 0;
margin 0 0 5px 0;
text-align:left;
}
table tbody td {
color:#888;
padding:2px;
border:0;
}
table tbody tr.odd {
background-color: #eee;
}
table tbody tr.even {
background-color:#fff;
}
table tbody tr:hover {
background-color:#ff6600;
}
table tbody tr:hover td {
color:#fff;
}
</style>
</head>
<body>
<table cellpadding="5" cellspacing="0" border="1">
<caption>111111111111</caption>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
</tr>
<tr class="even">
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
</tr>
<tr class="odd">
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
</tr>
<tr class="even">
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
</tr>
<tr class="odd">
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
</tr>
<tr class="even">
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
</tr>
</tbody>
</table>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style>
ul {
list-style: none;
margin: 0;
padding:0;
}
ul li {
float:left;
margin:0;
padding:0;
}
ul li a {
color:#777;
display:block;
width:75px;
padding:80px 0 0 0;
text-align:center;
text-decoration:none;
}
ul li a:hover {
color:#000;
background-color:#ff6600;
}
</style>
</head>
<body>
<ul>
<li id="a"><a href="#">111</a></li>
<li id="b"><a href="#">222</a></li>
<li id="c"><a href="#">333</a></li>
<li id="d"><a href="#">444</a></li>
</ul>
</body>
</html>上一篇:empty-cells和text-transform属性 下一篇:快递查询API