使用CSS实现分页器
【提示】：本文中’Out[]:'代表代码对应的运行结果。
1. 基本实现方案
将分页器看作是一个无序列表，页面项看作是无序列表项目，则一个最原始的分页器（不带样式）实现如下：
<ul class="pager"> <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="#">»</a></li> </ul>
Out[]:
- «
- 1
- 2
- 3
- »
- 以上这个分页器有3个页面，分别是1，2，3。
- “«”和“»”是为分页数目过多时预留的，即假设有数据量决定的页面有100页，当我们在58页时，显示的分页为57、58、59，这是“«”表示页面链接到57页的前一页，即56页。“»”同理，为60页。
- 由于这里我们只讨论CSS样式，不关系“«”和“»”是否出现和什么时候出现的逻辑。
让无序列表中所有的项目间组成行内元素
ul.pager li { display: inline; /* 行内元素 */ } ul.pager { display: inline-block; /* 行内块状元素 */ padding: 0; margin: 0; }
Out[]:
这就是一个最简单的分页器了。但这个分页器似乎并不好看。好看的分页器，如百度大概是这个样子的：
让每一个列表项目拥有方形背景
ul.pager li a { color: #000; /* 字体颜色 */ float: left; /* 从左向右浮动 */ padding: 12px 21px; /* 内边距 */ margin:3px; /* 外边距 */ text-decoration: none; /* 清除文字修饰 */ border: 1px solid #000; /* 边框颜色 */ }
Out[]:
为当前页标签绘色
ul.pager li a.active { background-color: #4E6EF2; color: white; border: 1px solid #4E6EF2; }
Out[]:
光标移入颜色变灰，光标移除颜色恢复
ul.pager li a:hover:not(.active) { background-color: #cdcdcd; }
光标移入3时：
光标移出3时：
这样，就实现了一个漂亮的CSS分页器
2. 进一步完善
上/下一页文字
这里主要是参考百度搜索的分页器看起来的样子进行调整。我们可以将左右部分使用文字：
<div class="bk"> <ul class="pager"> <li><a href="#"><上一页</a></li> <li><a href="#">1</a></li> <li><a class="active" href="#">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="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> <li><a href="#">下一页></a></li> </ul> </div>
圆角、光标移入变换时间
ul.pager li a { color: #000; /* 字体颜色 */ background-color: #fff; /* 背景颜色 */ float: left; /* 从左向右浮动 */ padding: 12px 18px; /* 内边距 */ margin:9px; /* 外边距 */ text-decoration: none; /* 清除文字修饰 */ border-radius: 6.5px; /* 圆角 */ transition: background-color .3s; /* 动画变换时间 */ }
添加一个背景色
由于各项目为白色，给个背景色：
.bk{ height:66px; width: 900px; background-color: #F5F5F6; text-align:center }
完整的代码
完整的代码如下：
<style> ul.pager li {display: inline;} ul.pager { display: inline-block; padding: 0; margin: 0; } ul.pager li a { color: #000; /* 字体颜色 */ background-color: #fff; /* 背景颜色 */ float: left; /* 从左向右浮动 */ padding: 12px 18px; /* 内边距 */ margin:9px; /* 外边距 */ text-decoration: none; /* 清除文字修饰 */ border-radius: 6.5px; /* 圆角 */ transition: background-color .3s; /* 动画变换时间 */ } ul.pager li a:hover:not(.active) { background-color: #cdcdcd; } ul.pager li a.active { background-color: #4E6EF2; color: white; border: 1px solid #4E6EF2; } .bk{ height:66px; width: 900px; background-color: #F5F5F6; text-align:center } </style> <div class="bk"> <ul class="pager"> <li><a href="#"><上一页</a></li> <li><a href="#">1</a></li> <li><a class="active" href="#">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="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> <li><a href="#">下一页></a></li> </ul> </div>
打开浏览器，可以看到：
