DIV CSS分页怎么做？-建站教程-锦华智联科技

分页的核心概念
- 为什么需要分页？
- 分页组件的基本构成
第一步：基础静态分页
- HTML 结构
- CSS 样式：实现基本样式和布局
第二步：增强交互与状态
- hover (悬停效果)
- active (点击效果)
- disabled (禁用状态)
- .active (当前页状态)
第三步：实现响应式设计
针对移动端的优化
（图片来源网络，侵删）
第四步：高级样式与变体
- 带边框的样式
- 图标分页
- 按钮式分页
第五步：动态分页（与后端/JS结合）
- 概述：HTML/CSS 的局限性
- 如何动态生成分页按钮
完整代码示例
总结与最佳实践

分页的核心概念

为什么需要分页？

当网站上的数据（如文章列表、商品、搜索结果）很多时，一次性全部加载会非常慢，影响用户体验，分页将数据分割成多个页面，每次只加载一部分,从而提升页面加载速度和可读性。

分页组件的基本构成

一个典型的分页器通常包含以下元素：

首页: 直接跳转到第一页。
上一页: 跳转到当前页的上一页。
页码: 代表具体页面,用户可直接点击。
下一页: 跳转到当前页的下一页。
末页: 直接跳转到最后一页。
页码信息: 显示“第 X 页，共 Y 页”等信息。

第一步：基础静态分页

我们先创建一个最简单的分页结构，并使用 CSS 进行美化。

HTML 结构

我们将使用 <nav> 标签来包裹分页器，这符合语义化 HTML 的标准，使用 <ul> 和 <li> 是最常见和易于管理的结构。

（图片来源网络，侵删）

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">首页</a></li>
    <li class="page-item"><a class="page-link" href="#">上一页</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">下一页</a></li>
    <li class="page-item"><a class="page-link" href="#">末页</a></li>
  </ul>
</nav>

.pagination: 容器类。
.page-item: 每个分页项的类。
.page-link: 分页项内链接的类。
.active: 当前所在页的 li 元素需要添加此类,用于高亮显示。

CSS 样式

我们用 CSS 来定义这些元素的外观和布局。

/* 基础样式重置和容器样式 */
.pagination {
  display: flex;          /* 使用 Flexbox 实现水平排列 */
  list-style: none;       /* 移除 ul 默认的列表符号 */
  padding: 0;
  margin: 20px 0;        /* 上下外边距 */
}
/* 分页项样式 */
.page-item {
  margin: 0 2px;         /* 控制页码之间的间距 */
}
/* 分页链接样式 */
.page-link {
  display: block;        /* 将链接设置为块级元素，可以设置宽高 */
  padding: 8px 16px;     /* 内边距，让链接看起来更舒适 */
  text-decoration: none; /* 移除下划线 */
  color: #007bff;        /* 默认文字颜色 */
  background-color: #fff; /* 背景色 */
  border: 1px solid #dee2e6; /* 边框 */
  border-radius: 4px;    /* 圆角 */
  cursor: pointer;       /* 鼠标悬停时显示手型 */
}
/* 当前页的样式 */
.page-item.active .page-link {
  background-color: #007bff; /* 蓝色背景 */
  color: #fff;             /* 白色文字 */
  border-color: #007bff;   /* 与背景同色的边框 */
}

效果预览： 你已经得到了一个功能完整、外观基础的分页器，所有页码水平排列，当前页高亮,并且有悬停指针。

第二步：增强交互与状态

一个好的分页器应该有清晰的视觉反馈。

`hover` (悬停效果)

当用户鼠标移到页码上时,改变其样式。

（图片来源网络，侵删）

.page-link:hover {
  background-color: #e9ecef; /* 浅灰色背景 */
  color: #0056b3;           /* 深一点的蓝色文字 */
  border-color: #0056b3;     /* 边框颜色也相应改变 */
}

`active` (点击效果)

当用户点击页码时,有一个被按下的感觉。

.page-link:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); /* 内部阴影，模拟按下效果 */
}

`disabled` (禁用状态)

当用户已经在首页时，“上一页”和“首页”按钮应该被禁用，我们通过给 li 添加 disabled 类来实现。

HTML 修改：

<li class="page-item disabled"><a class="page-link" href="#">首页</a></li>
<li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>

CSS 样式：

/* 禁用状态的页码项 */
.page-item.disabled .page-link {
  color: #6c757d; /* 灰色文字 */
  pointer-events: none; /* 让链接无法被点击 */
  background-color: #fff; /* 保持白色背景 */
  border-color: #dee2e6; /* 保持默认边框色 */
}

pointer-events: none; 是一个关键属性，它能让鼠标事件“穿透”该元素，这样下面的元素（如果有）就可以响应了,它确保了禁用的链接无法被点击。

第三步：实现响应式设计

在小屏幕设备上（如手机），水平排列的分页器可能会超出屏幕,我们需要将其变为垂直排列或减少显示的页码数量。

媒体查询

我们使用 @media 查询来针对小屏幕设备应用不同的样式。

/* 当屏幕宽度小于 576px 时（手机） */
@media (max-width: 576px) {
  .pagination {
    flex-wrap: wrap; /* 允许项目换行 */
  }
  .page-item {
    width: 100%; /* 让每个页码项占满一行 */
    margin: 2px 0; /* 修改上下间距 */
    text-align: center; /* 文字居中 */
  }
}

效果预览： 在手机上，分页器会自动变成垂直排列的样式，每个按钮占据一整行,保证了可用性。

第四步：高级样式与变体

变体1：带边框的样式

这种风格没有背景色,主要依靠边框来区分。

/* 为 .page-link 添加一个新的类，.pagination-bordered */
.pagination-bordered .page-link {
  border-width: 1px;
  border-color: #dee2e6;
  color: #333;
}
.pagination-bordered .page-item.active .page-link {
  background-color: #fff;
  color: #007bff;
  border-color: #007bff;
}

变体2：图标分页

使用图标（如 FontAwesome）代替文字。

HTML 修改：

<!-- 需要引入 FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-double-left"></i></a></li>
<li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-left"></i></a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<!-- ... -->
<li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-right"></i></a></li>
<li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-double-right"></i></a></li>

变体3：按钮式分页

让分页器看起来像一组按钮。

/* 按钮式分页样式 */
.pagination-button {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 5px; /* 按钮之间的间距 */
}
.pagination-button .page-item {
  margin: 0;
}
.pagination-button .page-link {
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  background-color: #f0f0f0;
  color: #333;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
}
.pagination-button .page-link:hover {
  background-color: #e0e0e0;
}
.pagination-button .page-item.active .page-link {
  background-color: #007bff;
  color: white;
}

第五步：动态分页（与后端/JS结合）

纯 HTML/CSS 无法实现真正的“动态”分页，因为它不知道总共有多少页，页码的生成需要后端语言（如 PHP, Python, Node.js）或前端 JavaScript 来完成。

概念：

后端渲染（常见）：
- 后端根据总数据量和每页显示数量计算出总页数。
- 后端在渲染 HTML 模板时，循环生成对应数量的 <li class="page-item"><a class="page-link" href="?page=X">X</a></li>。
- 当前页的 li 会带上 .active 类。
- 首页/末页/上一页/下一页的链接需要根据当前页数判断是否禁用。
前端渲染（AJAX）：
- 初始页面只加载第一页的数据和基本的分页器框架。
- 当用户点击页码时，JavaScript 发送一个 AJAX 请求到后端,请求对应页的数据。
- 后端返回该页的数据，前端 JavaScript 用新数据更新页面内容，并重新生成分页器（如果需要，比如页码范围变化）。

完整代码示例

这里是一个集成了所有上述特性的完整示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">分页示例</title>
  <style>
    /* 基础样式 */
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    nav {
      margin: 20px 0;
    }
    .pagination {
      display: flex;
      list-style: none;
      padding: 0;
      justify-content: center; /* 居中显示 */
    }
    .page-item {
      margin: 0 2px;
    }
    .page-link {
      display: block;
      padding: 10px 15px;
      text-decoration: none;
      color: #333;
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 5px;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
    }
    .page-link:hover {
      background-color: #f8f9fa;
      border-color: #ccc;
    }
    .page-item.active .page-link {
      background-color: #007bff;
      color: #fff;
      border-color: #007bff;
    }
    .page-item.disabled .page-link {
      color: #6c757d;
      background-color: #fff;
      border-color: #dee2e6;
      cursor: not-allowed;
      pointer-events: none;
    }
    /* 响应式设计 */
    @media (max-width: 576px) {
      .pagination {
        flex-wrap: wrap;
      }
      .page-item {
        width: 100%;
        margin: 2px 0;
        text-align: center;
      }
    }
  </style>
</head>
<body>
  <h1>文章列表</h1>
  <!-- 这里是文章内容... -->
  <nav aria-label="文章分页">
    <ul class="pagination">
      <li class="page-item disabled">
        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">首页</a>
      </li>
      <li class="page-item disabled">
        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
      </li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item active"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item">
        <a class="page-link" href="#">下一页</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="#">末页</a>
      </li>
    </ul>
  </nav>
</body>
</html>

注意： 我为禁用状态的链接添加了 tabindex="-1" 和 aria-disabled="true"，这对于无障碍访问（可访问性）非常重要,它告诉屏幕阅读器该元素不可聚焦。

总结与最佳实践

语义化 HTML： 始终使用 <nav> 和 <ul>/<li> 结构,这有助于搜索引擎和屏幕阅读器理解你的内容。
清晰的视觉反馈： 为悬停、点击、禁用和当前状态提供明确的样式，让用户清楚地知道哪些可以点击,当前在哪一页。
响应式是必须的： 确保你的分页器在移动设备上也能正常使用,媒体查询是你的好朋友。
无障碍访问 (A11y)： 使用 aria-label 描述分页器的用途，为禁用状态添加 aria-disabled,确保键盘导航也能正常工作。
CSS 优先： 尽量用 CSS 实现样式和交互，保持 HTML 结构的简洁，复杂的逻辑（如动态生成）再交给后端或 JavaScript。
可扩展性： 使用类名（如 .pagination, .page-link）而不是直接给元素写样式,这样更容易复用和修改。

通过这份教程，你应该能够从零开始，构建出专业、美观且功能完善的 DIV CSS 分页组件了。

DIV CSS分页怎么做？

目录