<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>翻页</title>
<style type=”text/css”>
.pagenation{
list-style: none;
margin:0;
padding:0;
width:600px;
height:40px;
border:1px solid #000;
font-size:0; /* 取消间隙 */
text-align:center;
}
.pagenation li{
display:inline-block;
height:26px;
/*background-color: gold;*/
font-size:12px;
margin-top:7px; /* 设置水平居中 */
margin-left:5px; /* 设置左右间隙 */
}
.pagenation li a{
display:block;
height:26px;
line-height:26px;
padding:0 10px;
text-decoration:none;
font:normal 12px/26px “Microsoft YaHei”;
color:#000;
background-color: gold;
}
.pagenation li a:hover{
color:#fff;
background-color:red;
}
</style>
</head>
<body>
<!– 规范的做法还是用ul、li –>
<ul class=”pagenation”>
<li><a href=”#”>上一页</a></li>
<li><a href=”#”>2</a></li>
<li><a href=”#”>3</a></li>
<li><a href=”#”>4</a></li>
<li><span>…</span></li>
<li><a href=”#”>17</a></li>
<li><a href=”#”>18</a></li>
<li><a href=”#”>19</a></li>
<li><a href=”#”>20</a></li>
<li><a href=”#”>下一页</a></li>
</ul>
</body>
</html>
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h64965.shtml