CSS 分页实例

分页是许多网站和应用中常见的功能，通常用于处理大量数据或内容的展示，例如文章、评论或搜索结果等。通过分页，用户可以方便地浏览分成多个页面的内容。以下是一个使用纯 CSS 制作的分页控件示例。

1️⃣ 基本分页

首先，我们将创建一个简单的分页控件，包含上一页、下一页按钮，以及具体的页面数字。

HTML：

<div class="pagination">
  <a href="#" class="prev">« Prev</a>
  <a href="#" class="page-number">1</a>
  <a href="#" class="page-number">2</a>
  <a href="#" class="page-number">3</a>
  <a href="#" class="next">Next »</a>
</div>

CSS：

/* 设置分页容器 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin-top: 20px;
}

/* 设置分页链接的基础样式 */
.pagination a {
  color: #007bff;
  padding: 10px 15px;
  margin: 0 5px;
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/* 设置悬停效果 */
.pagination a:hover {
  background-color: #007bff;
  color: white;
}

/* 设置当前页的样式 */
.pagination .active {
  background-color: #007bff;
  color: white;
  font-weight: bold;
  cursor: default;
}

/* 设置上一页和下一页的样式 */
.pagination .prev, .pagination .next {
  font-weight: bold;
  color: #007bff;
}

.pagination .prev:hover, .pagination .next:hover {
  background-color: #007bff;
  color: white;
}

效果说明：

  • 分页控件通过 display: flex 使页面数字、上一页、下一页按钮水平排列，并且 justify-content: center 保证它们居中对齐。
  • 每个分页链接都具有内边距、边框和圆角，提供良好的可点击效果。
  • 通过 :hover 伪类为分页按钮添加悬停效果，使得用户交互时按钮颜色发生变化。
  • 当前页通过 active 类来突出显示，并禁用链接，使其看起来不能点击。

2️⃣ 响应式分页

为了使分页控件在不同设备上显示良好，我们可以使用响应式设计方法，使其在小屏幕设备上自适应布局。具体来说，按钮的大小可以根据屏幕宽度进行调整。

HTML：

<div class="pagination">
  <a href="#" class="prev">« Prev</a>
  <a href="#" class="page-number">1</a>
  <a href="#" class="page-number">2</a>
  <a href="#" class="page-number">3</a>
  <a href="#" class="next">Next »</a>
</div>

CSS：

/* 设置分页容器 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin-top: 20px;
  flex-wrap: wrap; /* 在小屏幕时换行 */
}

/* 设置分页链接的基础样式 */
.pagination a {
  color: #007bff;
  padding: 10px 15px;
  margin: 0 5px;
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/* 设置悬停效果 */
.pagination a:hover {
  background-color: #007bff;
  color: white;
}

/* 设置当前页的样式 */
.pagination .active {
  background-color: #007bff;
  color: white;
  font-weight: bold;
  cursor: default;
}

/* 设置上一页和下一页的样式 */
.pagination .prev, .pagination .next {
  font-weight: bold;
  color: #007bff;
}

.pagination .prev:hover, .pagination .next:hover {
  background-color: #007bff;
  color: white;
}

/* 响应式设计 - 小屏幕时 */
@media (max-width: 600px) {
  .pagination a {
    padding: 8px 12px; /* 小屏幕时按钮大小变小 */
  }
}

效果说明：

  • flex-wrap: wrap 允许分页控件在小屏幕设备上换行，确保按钮能够自适应布局。
  • 使用 @media 查询，当屏幕宽度小于 600px 时，按钮的大小被缩小，提供更好的移动端体验。

3️⃣ 带省略号的分页

当页面非常多时，我们通常会用省略号（...）来简化分页展示。例如，我们可能不显示所有页面，而是只显示当前页面前后的几个页面，其他的页面用省略号表示。

HTML：

<div class="pagination">
  <a href="#" class="prev">« Prev</a>
  <a href="#" class="page-number">1</a>
  <span class="dots">...</span>
  <a href="#" class="page-number">8</a>
  <a href="#" class="page-number">9</a>
  <a href="#" class="page-number">10</a>
  <a href="#" class="next">Next »</a>
</div>

CSS：

/* 设置分页容器 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin-top: 20px;
}

/* 设置分页链接的基础样式 */
.pagination a {
  color: #007bff;
  padding: 10px 15px;
  margin: 0 5px;
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

/* 设置悬停效果 */
.pagination a:hover {
  background-color: #007bff;
  color: white;
}

/* 设置省略号的样式 */
.pagination .dots {
  padding: 10px 15px;
  color: #888;
}

/* 设置当前页的样式 */
.pagination .active {
  background-color: #007bff;
  color: white;
  font-weight: bold;
  cursor: default;
}

/* 设置上一页和下一页的样式 */
.pagination .prev, .pagination .next {
  font-weight: bold;
  color: #007bff;
}

.pagination .prev:hover, .pagination .next:hover {
  background-color: #007bff;
  color: white;
}

效果说明：

  • 使用 <span class="dots">...</span> 来表示省略号。
  • dots 类的颜色为浅灰色（#888），使省略号看起来不那么显眼。

总结

分页是网站和应用中非常重要的一部分，CSS 使我们能够非常方便地创建美观、响应式的分页控件。通过合理使用 CSS 样式，可以使分页控件既简单又具有吸引力，同时确保在各种设备上都能良好显示。