纯CSS制作自适应分页条附源码下载

分页条是web开发中常用的前端组件之一，它能将数据分批次展示给用户。我们知道诸如Bootstrap这类框架都提供了非常漂亮的分页条组件，但是你的项目可能不用到Bootstrap，你想自己定制一个属于你自己项目的漂亮的分页条，那么请看本文。

查看演示               下载源码

本文给大家介绍用纯CSS制作一款漂亮的分页条，可以适应各种PC和手机等移动端屏幕，开发者可以下载源码自行更改css代码，定制属于你自己项目的风格。

HTML结构

分页结构分别由两边的上一页和下一页两个按钮、以及中间的数字页码组成。我们用一个<nav>元素来包裹一个无序列表（ul.cd-pagination）。在无序列表中，我们给上一页和下一页按钮加上.button样式，中间页面数字中，用a.current样式表示当前页码。如果想让页码间无空隙，则给ul添加.no-space样式，代码结构如下：

<nav role="navigation">
<ul class="cd-pagination no-space">
<li class="button"><a class="disabled" href="#0">上一页</a></li>
<li><a class="current" href="#0">1</a></li>
<li><a href="#0">2</a></li>
<li><a href="#0">3</a></li>
<li><a href="#0">4</a></li>
<li><span>...</span></li>
<li><a href="#0">20</a></li>
<li class="button"><a href="#0">下一页</a></li>
</ul>
</nav>

CSS

首先，我们将分页条居中，并设置宽度，间距等。然后设置上一页和下一页始终显示，而数字页码则在小屏幕上如手机上会隐藏起来。还可以设置页码文字大小以及点击效果。

nav[role="navigation"] {
text-align: center;
}
.cd-pagination {
width: 90%;
max-width: 768px;
margin: 2em auto 2em;
text-align: center;
}
.cd-pagination li {
/* 小屏幕上隐藏数字 */
display: none;
margin: 0 .2em;
}
.cd-pagination li.button {
/* 显示上一页和下一页按钮 */
display: inline-block;
}
.cd-pagination a, .cd-pagination span {
display: inline-block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* 设置按钮大小 */
padding: .6em .8em;
font-size: 1rem;
}
.cd-pagination a {
border: 1px solid #e6e6e6;
border-radius: 0.25em;
}
.no-touch .cd-pagination a:hover {
background-color: #f2f2f2;