CSS 分页示例
学习如何使用 CSS 创建响应式分页。
简单分页
如果您的网站有很多页面，您可能希望在每个页面上添加某种分页
示例
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
自己动手试一试 »
活动和可悬停分页
用 .active 类高亮显示当前页面，并使用 :hover 选择器在鼠标悬停时改变每个页面链接的颜色
示例
.pagination a.active {
background-color: #4CAF50;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
自己动手试一试 »
圆角活动和可悬停按钮
如果您想要圆角的“活动”和“悬停”按钮，请添加 border-radius 属性
悬停过渡效果
为页面链接添加 transition 属性，以创建悬停时的过渡效果
带边框的分页
使用 border 属性为分页添加边框
圆角边框
提示：为分页中的第一个和最后一个链接添加圆角边框
示例
.pagination a:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.pagination a:last-child {
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";
}
自己动手试一试 »
