<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'/>
<title>翻页</title>
<style type="text/css">
.box{
width: 960px;
height: 42px;
border:1px solid #e5e5e5;
margin: 0 auto;
}
.box1{
float: right;
padding: 10px 200px 10px 5px;
text-decoration: none;
}
.box2{
float: right;
padding: 10px 5px;
text-decoration: none;
}
.box3{
float: right;
padding: 10px 5px;
text-decoration: none;
}
.box4{
float: right;
padding: 10px 5px;
text-decoration: none;
}
.box5{
float: right;
padding: 10px 5px;
text-decoration: none;
}
.box6{
float: right;
padding-bottom: 20px;
text-decoration: none;
}
.box7{
float: right;
padding: 10px 5px;
text-decoration: none;
}
.box8{
float: right;
padding: 10px 5px;
text-decoration: none;
}
.box9{
float: right;
padding: 10px 5px;
text-decoration: none;
}
.box10{
float: right;
padding: 10px 5px;
text-decoration: none;
}
.box11{
float: right;
padding: 10px 5px;
text-decoration: none;
}
a{
text-decoration: none;
background-color: gold;
font: 12px 微软雅黑 black;
padding: 5px 10px;
}
.box a:hover{
color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"><a href="#"> 下一页 </a></div>
<div class="box2"><a href="#"> 20 </a></div>
<div class="box3"><a href="#">19</a></div>
<div class="box4"><a href="#">18</a></div>
<div class="box5"><a href="#">17</a></div>
<div class="box6"><p>...</p></div>
<div class="box7"><a href="#">4</a></div>
<div class="box8"><a href="#">3</a></div>
<div class="box9"><a href="#">2</a></div>
<div class="box10"><a href="#">1</a></div>
<div class="box11"><a href="#">上一页</a></div>
</div>
</body>
</html>
翻页.jpg
