分頁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分頁</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
a{
text-decoration: none;
}
.wrap{
width: 960px;
height: 42px;
margin:50px auto;
}
.wrap .container{
border:1px solid #ccc;
}
.paging{
text-align: center;
padding: 5px 10px;
font-size: 12px;
font-family: "Microsoft YaHei";
}
.paging .prev,.next{
display: inline-block;
width: 70px;
height: 30px;
line-height: 30px;
background-color: gold;
color: #000;
cursor: pointer;
}
.paging a,.point{
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
background-color: gold;
}
.point{
background: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrap">
<div class="container">
<div class="paging">
<span class="prev">上一頁</span>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<span class="point">...</span>
<a href="">17</a>
<a href="">18</a>
<a href="">19</a>
<a href="">20</a>
<span class="next">下一頁</span>
</div>
</div>
</div>
</body>
</html>
效果
image.png
