css制作普通漂亮的分页条案例
1、写html内容，在li标签里放a元素，带有上一页与下一页，首页与尾页：
2、初始化css样式，设置内外边距为0，去除li元素的默认小点：
3、写分页条加上下左右边距为50它，让li标签左浮动：
4、给a标签去除下画线，加上内外边距，高设置字体为黑色，边框为浅灰色：
5、给a标签加上鼠标悬浮效果：
.gcs-pagination a:hover{
background: #CCCCCC;
}
6、给当前页设置背景颜色，并设置字体为白色：
7、请参考完整的代码：
<!DOCpTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
.gcs-pagination{
margin: 50px;
background: #ccc;
}
.gcs-pagination li{
float: left;
}
.gcs-pagination a {
text-decoration: none;
padding: 5px 12px;
margin: 2px;
color: black;
border: 1px solid lightgray;
}
.gcs-pagination a:hover{
background: #CCCCCC;
}
.gcs-pagination a.cur{
background: #4CAF50;
color: #FFFFFF;
}
</style>
</head>
<body>
<ul class="gcs-pagination">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#" class="cur">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">...</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</body>
</html>