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>