<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻页</title>
<style type="text/css">
ul{
text-align: center;
width: 960px;
height: 42px;
margin: 0 auto;
list-style:none;
border: 1px solid #dfdfdf;
background-color:white;
}
li{
display: inline;
list-style: none;
}
li a{
display: inline;
position: relative;
top:10px;
padding: 5px 10px;
background-color: gold;
border: 5px solid white;
color: black;
font:12px '微软雅黑';
text-decoration: none;
}
li a:hover{
background: orange;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li><a href="#">上一页</a></li>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li>…</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>
</div>
</body>
</html>
效果如下图：
2.png
网友评论