CSS 分页

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;}

亲自试一试

圆角的活动可悬停分页

如果您需要圆角的 "active" 和 "hover" 按钮,请添加 border-radius 属性:

实例

.pagination a {  border-radius: 5px;}.pagination a.active {  border-radius: 5px;}

亲自试一试

可悬停的过渡效果

请将 transition 属性添加到页面链接,创建鼠标悬停时的过渡效果:

实例

.pagination a {  transition: background-color .3s;}

亲自试一试

带边框的分页

请使用 border 属性为分页添加边框:

实例

.pagination a {  border: 1px solid #ddd; /* Gray */}

亲自试一试

圆角边框

提示:在分页的第一个和最后一个链接中添加圆角边框:

实例

.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 属性:

实例

.pagination a {  margin: 0 4px; /* 上下外边距为 0,可灵活修改 */}

亲自试一试

分页尺寸

请使用 font-size 属性更改分页的大小:

实例

.pagination a {  font-size: 22px;}

亲自试一试

居中的分页

如需居中分页,请使用设置了 text-align:center 的容器元素(如 <div>)包围它:

实例

.center {  text-align: center;}

亲自试一试

更多实例

实例

亲自试一试

面包屑

分页的另一种形式是所谓的“面包屑”(breadcrumbs):

实例

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";}

亲自试一试