了解如何使用CSS创建一个响应分页。
简单分页
如果你有很多页的网站，你不妨某种分页添加到每个页面：
要创建一个分页，风格HTML列表：
例
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li
{display: inline;}
ul.pagination li a {
color:
black;
float: left;
padding: 8px
16px;
text-decoration: none;
} 试一试» 主动和Hoverable分页
与突出显示当前页面.active类，并使用:hover选择改变移动鼠标超过他们在每个页面链接的颜色：
例
ul.pagination li a.active {
background-color:
#4CAF50;
color: white;
}
ul.pagination li
a:hover:not(.active) {background-color: #ddd;} 试一试» 圆润的主动和Hoverable按钮
添加border-radius ，如果你想有一个圆形的“积极”和“悬停”按钮属性：
Hoverable过渡效果
添加transition属性页面链接创建一个悬停过渡效果：
界定分页
使用border属性来添加边框分页：
边框圆角
提示：添加圆角边框在分页你的第一个和最后一个环节：
例
.pagination li:first-child a {
border-top-left-radius:
5px;
border-bottom-left-radius: 5px;
}
.pagination li:last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
试一试» 空间之间的链接
提示：添加margin属性，如果你不想组页面链接：
分页大小
更改与分页大小font-size属性：
分页中心
要居中分页，包装容器元素周围（如<div>并添加text-align:center
更多示例
例
试一试»面包屑
分页的另一个变化是所谓的“面包屑”：
例
ul.breadcrumb {
padding: 8px 16px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
试一试»