CSS 分页实例

学习如何使用 CSS 创建响应式分页。

简单的分页

如果网站上有很多页面，那么您可能希望在每张页面上添加某种分页功能：

实例

  1. .pagination {
  2.   display: inline-block;
  3. }
  5. .pagination a {
  6.   color: black;
  7.   float: left;
  8.   padding: 8px 16px;
  9.   text-decoration: none;
  10. }

css_ex_pagination.htm

活动的可悬停分页

用 .active 类突出显示当前页面，并在鼠标移到它们上方时使用 :hover 选择器更改每个页面链接的颜色：

实例

  1. .pagination a.active {
  2.   background-color: #4CAF50;
  3.   color: white;
  4. }
  6. .pagination a:hover:not(.active) {background-color: #ddd;}

css_ex_pagination_active.htm

圆角的活动可悬停分页

如果您需要圆角的 “active” 和 “hover” 按钮，请添加 border-radius 属性：

实例

  1. .pagination a {
  2.   border-radius: 5px;
  3. }
  5. .pagination a.active {
  6.   border-radius: 5px;
  7. }

css_ex_pagination_active_round.htm

可悬停的过渡效果

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

实例

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

css_ex_pagination_transition.htm

带边框的分页

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

实例

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

css_ex_pagination_border.htm

圆角边框

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

实例

  1. .pagination a:first-child {
  2.   border-top-left-radius: 5px;
  3.   border-bottom-left-radius: 5px;
  4. }
  6. .pagination a:last-child {
  7.   border-top-right-radius: 5px;
  8.   border-bottom-right-radius: 5px;
  9. }

css_ex_pagination_border_round.htm

链接之间的空间

提示：如果不想组合页面链接，请添加 margin 属性：

实例

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

css_ex_pagination_margin.htm

分页尺寸

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

实例

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

css_ex_pagination_size.htm

居中的分页

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

实例

  1. .center {
  2.   text-align: center;
  3. }

css_ex_pagination_center.htm

更多实例

实例

前进/后退按钮、导航分页：

css_ex_pagination_nav.htm

面包屑

分页的另一种形式是所谓的“面包屑”（breadcrumbs）：

实例

  1. ul.breadcrumb {
  2.   padding: 8px 16px;
  3.   list-style: none;
  4.   background-color: #eee;
  5. }
  7. ul.breadcrumb li {display: inline;}
  9. ul.breadcrumb li+li:before {
  10.   padding: 8px;
  11.   color: black;
  12.   content: "/\00a0";
  13. }

css_ex_pagination_breadcrumbs.htm