码农教程 - 一技在手,衣食无忧! tools

目录

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属性，如果您想要圆角 "active" 和 "hover" 按钮：

示例

.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 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;
}
亲自试一试 »

更多示例

示例

亲自试一试 »

面包屑

分页的另一种变体称为"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";
}
亲自试一试 »

❮ 上一节 下一节 ❯