Css 简明教程

CSS - Pagination

CSS 分页是一种用于创建网站页码的技术，使用户可以轻松地在大量内容之间导航。它是一种组织网站并使其更具用户友好的简单有效的方法。

Step 1: Add HTML Markup

要在 HTML 中创建分页元素，可以使用 <div> 或 <ul> 元素。元素将包含您内容的每一页的链接，并可以包含“上一个”和“下一个”链接。

<div class="simple-pagination">
   <a href="#">«</a>
   <a href="#">A</a>
   <a href="#">B</a>
   <a href="#">C</a>
   <a href="#">D</a>
   <a href="#">E</a>
   <a href="#">»</a>
</div>

Step 2: Define CSS Classes

指定分页的 CSS 样式，包括 display 、 padding 和 list-styles 。

.simple-pagination {
   display: flex;
   list-style: none;
   padding: 0;
}

Step 3: Pagination Link Styles

您可以设置各个分页链接（<a> 元素）的样式以控制它们的外观，如它们的 color 、 padding 和 text decoration 。

.simple-pagination a {
   text-decoration: none;
   padding: 12px;
   color: black;
}

CSS Simple Pagination

以下示例演示了显示为 flexbox 容器的简单分页元素：

<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 12px;
      color: black;
   }
</style>
</head>
<body>
   <div class="simple-pagination">
      <a href="#">«</a>
      <a href="#">A</a>
      <a href="#">B</a>
      <a href="#">C</a>
      <a href="#">D</a>
      <a href="#">E</a>
      <a href="#">»</a>
   </div>
</body>
</html>

CSS Active and Hoverable Pagination

您可以通过下列方式创建具有不同样式的分页元素：

  1. 为当前页码添加 * .active* 类。

  2. 在所有页面链接上悬停时，使用 * :hover* 选择器更改它们的 color。

示例如下：

<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-pagination">
      <a href="#">«</a>
      <a href="#" class="active-link">A</a>
      <a href="#">B</a>
      <a href="#">C</a>
      <a href="#">D</a>
      <a href="#">E</a>
      <a href="#">»</a>
   </div>
</body>
</html>

CSS Rounded Active and Hoverable Buttons

您可以通过添加 * border-radius* CSS 属性创建具有圆形活动和悬停按钮的分页元素。

示例如下：

<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      border-radius: 8px;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-pagination">
      <a href="#">«</a>
      <a href="#" class="active-link">A</a>
      <a href="#">B</a>
      <a href="#">C</a>
      <a href="#">D</a>
      <a href="#">E</a>
      <a href="#">»</a>
   </div>
</body>
</html>

CSS Hoverable Transition Effect

您可以通过在分页链接上悬停时使用 * transition* 属性创建具有平滑过渡的分页元素。

示例如下：

<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      transition: background-color 0.4s;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-pagination">
      <a href="#">«</a>
      <a href="#" class="active-link">A</a>
      <a href="#">B</a>
      <a href="#">C</a>
      <a href="#">D</a>
      <a href="#">E</a>
      <a href="#">»</a>
   </div>
</body>
</html>

CSS Bordered Pagination

当您想为分页链接添加边框时，您可以使用 CSS * border* 属性。

示例如下：

<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      transition: background-color 0.4s;
      border: 2px solid blue;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-pagination">
      <a href="#">«</a>
      <a href="#" class="active-link">A</a>
      <a href="#">B</a>
      <a href="#">C</a>
      <a href="#">D</a>
      <a href="#">E</a>
      <a href="#">»</a>
   </div>
</body>
</html>

CSS Rounded Borders

当您希望将分页链接的角弄圆时，您可以使用 `CSS * border-radius* ` 属性。

示例如下：

<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      transition: background-color 0.4s;
      border: 2px solid blue;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:first-child {
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
   }
   .simple-pagination a:last-child {
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-pagination">
      <a href="#">«</a>
      <a href="#" class="active-link">A</a>
      <a href="#">B</a>
      <a href="#">C</a>
      <a href="#">D</a>
      <a href="#">E</a>
      <a href="#">»</a>
   </div>
</body>
</html>

CSS Space Between Links

以下示例演示了如何使用 `CSS * margin* ` 属性在分页组件中每个链接周围创建空间 −

<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      transition: background-color 0.4s;
      border: 2px solid blue;
      margin: 2px;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-pagination">
      <a href="#">«</a>
      <a href="#" class="active-link">A</a>
      <a href="#">B</a>
      <a href="#">C</a>
      <a href="#">D</a>
      <a href="#">E</a>
      <a href="#">»</a>
   </div>
</body>
</html>

以下示例演示了如何使用 `CSS column-gap ` 属性在分页组件中每个链接周围创建空间 −

<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
      column-gap: 2px;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      transition: background-color 0.4s;
      border: 2px solid blue;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-pagination">
      <a href="#">«</a>
      <a href="#" class="active-link">A</a>
      <a href="#">B</a>
      <a href="#">C</a>
      <a href="#">D</a>
      <a href="#">E</a>
      <a href="#">»</a>
   </div>
</body>
</html>

CSS Pagination Size

以下示例演示 * font-size* 属性可用于设置链接中文本的大小。

<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      border: 2px solid blue;
      font-size: 20px;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-pagination">
      <a href="#">«</a>
      <a href="#" class="active-link">A</a>
      <a href="#">B</a>
      <a href="#">C</a>
      <a href="#">D</a>
      <a href="#">E</a>
      <a href="#">»</a>
   </div>
</body>
</html>

CSS Centered Pagination

当您希望将分页组件中的链接居中时，您可以使用 * justify-content* CSS 属性。

示例如下：

<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
      justify-content: center;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      transition: background-color 0.4s;
      border: 2px solid blue;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-pagination">
      <a href="#">«</a>
      <a href="#" class="active-link">A</a>
      <a href="#">B</a>
      <a href="#">C</a>
      <a href="#">D</a>
      <a href="#">E</a>
      <a href="#">»</a>
   </div>
</body>
</html>

CSS Pagination With Next Previous Buttons

以下示例演示了一个带前后按钮的简单分页组件 −

<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
      margin: 10px;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      transition: background-color 0.4s;
      border: 2px solid blue;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-pagination">
      <a href="#" class="active-link">Tutorialspoint</a>
      <a href="#">Home</a>
      <a href="#">Articles</a>
      <a href="#">Courses</a>
      <a href="#">Settings</a>
   </div>
   <div class="simple-pagination">
      <a href="#" class="prev-next">< Previous</a>
      <a href="#" class="prev-next">Next ></a>
   </div>
</body>
</html>

CSS Pagination With Breadcrumb

以下示例演示了一个带前后按钮的简单分页组件 −

<html>
<head>
<style>
   ul.breadcrumb-pagination {
      padding: 10px;
      list-style: none;
      background-color: pink;
   }
   ul.breadcrumb-pagination li {
      display: inline-block;
   }
   ul.breadcrumb-pagination li a {
      color: blue;
   }
   ul.breadcrumb-pagination li+li:before {
      padding: 10px;
      content: "/\00a0";
   }
</style>
</head>
<body>
   <ul class="breadcrumb-pagination">
      <li><a href="#">Tutorialspoint</a></li>
      <li><a href="#">CSS Pagination</a></li>
      <li class="active-link">CSS Pagnation With Breadcrumb</li>
   </ul>
</body>
</html>

CSS Pagination With List

您还可以使用无序列表 (<ul>) 和列表项 (<li>) 来创建分页。

示例如下：

<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      padding: 0;
      list-style: none;
   }
   .simple-pagination li {
      margin: 5px;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      border: 2px solid blue;
   }
   .simple-pagination a:hover {
      background-color: pink;
   }
   .simple-pagination .active-link {
      background-color: violet;
      color: white;
   }
</style>
</head>
<body>
   <ul class="simple-pagination">
      <li><a href="#">«</a></li>
      <li><a href="#" class="active-link">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
      <li><a href="#">D</a></li>
      <li><a href="#">E</a></li>
      <li><a href="#">»</a></li>
   </ul>
</body>
</html>