CSS 分页可以通过 CSS 创建一个分页组件（CSS3 本身并不提供分页的内建功能），用来在网页中显示分页链接。常见的分页实现方式通常涉及将多个分页链接放入一个容器，并通过 CSS 控制它们的布局、外观和交互效果。

1. 基础分页结构

分页的结构通常包括：

• 当前页的按钮（高亮显示）
• 各页的按钮
• 上一页、下一页按钮

示例：基础分页 HTML 结构

<div class="pagination">
  <a href="#" class="prev">&laquo; Prev</a>
  <a href="#" class="page">1</a>
  <a href="#" class="page">2</a>
  <a href="#" class="page">3</a>
  <a href="#" class="page">4</a>
  <a href="#" class="next">Next &raquo;</a>
</div>

2. 基本分页样式

接下来，我们使用 CSS 来设计分页的样式，让它看起来更清晰和美观。

示例：基本分页 CSS 样式

.pagination {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.pagination a {
  color: #3498db;
  text-decoration: none;
  padding: 10px 20px;
  margin: 0 5px;
  border: 1px solid #3498db;
  border-radius: 5px;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.pagination a:hover {
  background-color: #3498db;
  color: white;
}

.pagination .prev, .pagination .next {
  font-weight: bold;
}

.pagination .page.active {
  background-color: #3498db;
  color: white;
  cursor: not-allowed;
}

.pagination a:disabled {
  background-color: #ddd;
  color: #bbb;
  cursor: not-allowed;
}

3. 分页效果说明

• pagination 类设置为 display: flex 使分页按钮在水平方向上排列。
• 给每个分页链接加上一些内边距、边框、圆角等样式来提升按钮的视觉效果。
• :hover 伪类设置按钮悬停时的背景颜色变换。
• .active 类可以用于当前页的按钮，用不同的颜色突出显示当前页。
• 使用 disabled 状态来禁用上一页或下一页按钮（当无法继续翻页时）。

4. 添加当前页高亮

为了让用户更容易知道自己所在的页面，我们可以通过动态设置 .active 类来高亮当前页。

示例：高亮当前页

<div class="pagination">
  <a href="#" class="prev" disabled>&laquo; Prev</a>
  <a href="#" class="page">1</a>
  <a href="#" class="page active">2</a> <!-- 当前页 -->
  <a href="#" class="page">3</a>
  <a href="#" class="page">4</a>
  <a href="#" class="next">Next &raquo;</a>
</div>

5. 分页按钮禁用效果

对于上一页和下一页按钮，我们可以通过条件判断来禁用它们。比如，在第一页时禁用上一页按钮，在最后一页时禁用下一页按钮。

示例：禁用按钮

<div class="pagination">
  <a href="#" class="prev" disabled>&laquo; Prev</a>
  <a href="#" class="page">1</a>
  <a href="#" class="page">2</a>
  <a href="#" class="page">3</a>
  <a href="#" class="page">4</a>
  <a href="#" class="next" disabled>Next &raquo;</a> <!-- 下一页按钮禁用 -->
</div>

6. 响应式分页设计

分页组件在移动端上需要适应较小的屏幕。我们可以使用媒体查询（@media）来调整分页按钮的布局，以确保它在不同屏幕大小下都能正常显示。

示例：响应式分页

@media (max-width: 600px) {
  .pagination {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .pagination a {
    padding: 8px 15px;
    font-size: 14px;
  }

  .pagination .prev, .pagination .next {
    width: 100%;
    text-align: center;
    margin-top: 10px;
  }
}

7. 总结

通过以上的示例，我们使用了 CSS 来设计一个简洁而美观的分页组件，并展示了如何高亮当前页、禁用按钮、响应式布局等常见功能。虽然分页功能的逻辑通常需要 JavaScript 来实现，但 CSS 可以在样式上做出许多漂亮的设计和交互效果，提升用户体验。