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

尝试一下

圆形活动和可悬浮按钮

border-radius如果您想要一个圆形的“活动”和“悬停”按钮，请添加该属性：

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

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

尝试一下

悬浮过渡效果

.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 is for top and bottom. Feel free to change it */
}

尝试一下

分页大小

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

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

尝试一下

分页居中

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

.center {
                  text-align: center;
                }

尝试一下

下一个/上一个按钮：

.pagination {
            display: inline-block;
        }

        .pagination a {
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
            transition: background-color .3s;
            border: 1px solid #ddd;
        }

        .pagination a.active {
            background-color: #4CAF50;
            color: white;
            border: 1px solid #4CAF50;
        }

尝试一下

面包屑

分页的另一种变化是所谓的“面包屑”：

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

尝试一下

CSS分页

简单的分页

活动的和可悬浮分页

圆形活动和可悬浮按钮

有边界的分页

分页大小

分页居中

上一页下一页按钮

面包屑

相关页面