CSS教程
/ 分页实例
分页实例
简单的分页
如果网站上有很多页面，那么您可能希望在每张页面上添加某种分页功能：
- «
- 1
- 2
- 3
- 4
- 5
- 6
- »
- ❮
- ❯
实例
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
活动的可悬停分页
- «
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- »
用 .active 类突出显示当前页面，并在鼠标移到它们上方时使用 :hover 选择器更改每个页面链接的颜色：
实例
.pagination a.active {
background-color: #4CAF50;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
运行实例 »点击 "运行实例" 按钮查看在线实例
圆角的活动可悬停分页
- «
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- »
如果您需要圆角的 "active" 和 "hover" 按钮，请添加 border-radius 属性：
实例
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
可悬停的过渡效果
- «
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- »
请将 transition 属性添加到页面链接，创建鼠标悬停时的过渡效果：
实例
.pagination a {
transition: background-color .3s;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
带边框的分页
- «
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- »
请使用 border 属性为分页添加边框：
实例
.pagination a {
border: 1px solid #ddd; /* Gray */
}
运行实例 »点击 "运行实例" 按钮查看在线实例
圆角边框
提示：在分页的第一个和最后一个链接中添加圆角边框：
- «
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- »
实例
.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 属性：
- «
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- »
实例
.pagination a {
margin: 0 4px; /* 上下外边距为 0，可灵活修改 */
}
运行实例 »点击 "运行实例" 按钮查看在线实例
分页尺寸
- «
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- »
请使用 font-size 属性更改分页的大小：
实例
.pagination a {
font-size: 22px;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
居中的分页
- «
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- »
如需居中分页，请使用设置了 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";
}
运行实例 »点击 "运行实例" 按钮查看在线实例