CSS - 分页

上一页
下一页

CSS 分页是一种为网站创建页码的技术。这有助于用户轻松浏览大量内容。本章，我们将学习如何使用 CSS 设置和样式化分页。

CSS 分页示例

这是一个使用 CSS 样式化的分页示例。

« 1 2 3 4 5 »
第一页
第二页
第三页
第四页
第五页

目录


 

如何为网站设置分页？

要为网站设置分页，您需要将内容分成较小的页面，并在每个页面上提供导航以在页面之间移动。让我们看看设置分页的分步过程。

设置 HTML 结构

首先，我们需要为分页设置设置 HTML 结构。我们可以为此使用包含在 div 元素中的锚点标签。以下是分页设置的 HTML 结构代码。

<div class="pagination">
    <a href="#">«</a> <!-- Previous Page -->
    <a href="#" class="active">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">»</a> <!-- Next Page -->
</div>

<div id="page1" class="page active">Page 1 Shows....</div>
<div id="page2" class="page">Page 2 Shows....</div>

使用 CSS 控制可见性

最初，所有页面都应该是不可见的，除了第一页。为此，我们可以对所有页面使用display属性设置为 none。由于类“active”已添加到第一页，因此它最初将可见。

.pagination {
    display: flex;            
    justify-content: center;    
}

.page {
    display: none;         
}

.active {
    display: block;      
}

使用 JavaScript 实现分页逻辑

现在，我们需要添加一些 JavaScript 来处理分页逻辑。我们可以使用 JavaScript addEventListener() 方法捕获分页链接上的点击事件，并根据该事件更改页面的可见性。

简单的分页示例

以下示例显示了使用上述步骤开发的简单分页设置。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        body{
            height: 150px;
        }
        .pagination {
            display: flex;            
            justify-content: center;    
            margin: 20px 0;            
        }

        .pagination a {
            color: green;               
            border: 5px solid #ddd;     
            padding: 5px 10px;         
            margin: 0 5px;           
        }

        .page {
            display: none;         
        }

        .active {
            display: block;      
        }
    </style>
</head>

<body>
    <div class="pagination">
        <a href="#page1">1</a>
        <a href="#page2">2</a>
        <a href="#page3">3</a>
        <a href="#page4">4</a>
        <a href="#page5">5</a>
    </div>

    <div id="page1" class="page active">Page 1 Shows....</div>
    <div id="page2" class="page">Page 2 Shows....</div>
    <div id="page3" class="page">Page 3 Shows....</div>
    <div id="page4" class="page">Page 4 Shows....</div>
    <div id="page5" class="page">Page 5 Shows....</div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const pages = document.querySelectorAll('.pagination a');
            const contentPages = document.querySelectorAll('.page');

            pages.forEach(page => {
                page.addEventListener('click', function(event) {
                    event.preventDefault();

                    // Remove 'active' class from all content pages
                    contentPages.forEach(p => p.classList.remove('active'));

                    // Find the target page and display it
                    const targetPage = document.querySelector(this.getAttribute('href'));
                    if (targetPage) {
                        targetPage.classList.add('active');
                    }

                    // Add 'active' class to the clicked link
                    this.classList.add('active');
                });
            });
        });
    </script>
</body>

</html>

使用 CSS 样式化分页

要设置分页链接的样式，我们可以使用伪类 :active 和 :hover。

  • 伪类 :active 可用于突出显示分页链接中的当前页面。

  • 伪类 :hover 可用于设置分页链接的鼠标悬停状态样式。

以下示例显示了这些属性如何增强分页链接的外观。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .pagination {
            display: flex;
            list-style: none;
            padding: 0;
        }
        .pagination a {
            text-decoration: none;
            padding: 8px 12px;
            color: #333;
        }
        .pagination a.active-link {
            background-color: violet;
            color: white;
        }
        .pagination a:hover:not(.active-link) {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="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>

圆角分页按钮

我们可以使用 border-radius CSS 属性创建一个具有圆角按钮的分页链接。让我们来看一个例子

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .pagination {
            display: flex;
            list-style: none;
            padding: 0;
        }
        .pagination a {
            text-decoration: none;
            padding: 8px 12px;
            color: #333;
            border-radius: 8px;
        }
        .pagination a.active-link {
            background-color: violet;
            color: white;
        }
        .pagination a:hover:not(.active-link) {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="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>

可悬停过渡效果

我们可以使用transition 属性，在悬停在每个页面链接上时使分页链接平滑过渡。让我们来看一个例子

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .pagination {
            display: flex;
            list-style: none;
            padding: 0;
        }
        .pagination a {
            text-decoration: none;
            padding: 8px 12px;
            color: #333;
            transition: background-color 0.4s;
        }
        .pagination a.active-link {
            background-color: violet;
            color: white;
        }
        .pagination a:hover:not(.active-link) {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="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 border 属性。这是一个示例

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .pagination {
            display: flex;
            list-style: none;
            padding: 0;
        }
        .pagination a {
            text-decoration: none;
            padding: 8px 12px;
            color: #333;
            transition: background-color 0.4s;
            border: 2px solid black;
        }
        .pagination a.active-link {
            background-color: violet;
            color: white;
        }
        .pagination a:hover:not(.active-link) {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="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 margin 属性在分页组件中每个链接周围创建空间。让我们来看一个例子。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .pagination {
            display: flex;
            list-style: none;
            padding: 0;
        }
        .pagination a {
            text-decoration: none;
            padding: 8px 12px;
            color: #333;
            transition: background-color 0.4s;
            border: 2px solid black;
            margin: 2px;
        }
        .pagination a.active-link {
            background-color: violet;
            color: white;
        }
        .pagination a:hover:not(.active-link) {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="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>

分页大小

要更改分页链接的大小，我们可以使用font-size 属性。让我们来看一个例子

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .pagination {
            display: flex;
            list-style: none;
            padding: 0;
        }
        .pagination a {
            text-decoration: none;
            padding: 8px 12px;
            color: #333;
            border: 2px solid black;
            font-size: 20px;
            margin: 2px;
        }
        .pagination a.active-link {
            background-color: violet;
            color: white;
        }
        .pagination a:hover:not(.active-link) {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="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>

居中的分页

我们可以使用justify-content CSS 属性来居中分页链接。这是一个示例。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .pagination {
            display: flex;
            list-style: none;
            padding: 0;
            justify-content: center;
        }
        .pagination a {
            text-decoration: none;
            padding: 8px 12px;
            color: #333;
            transition: background-color 0.7s;
            border: 2px solid black;
            margin: 2px;
        }
        .pagination a.active-link {
            background-color: violet;
            color: white;
        }
        .pagination a:hover:not(.active-link) {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="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>

带有上一页和下一页按钮的分页

我们可以在分页链接中添加上一页和下一页按钮以进行更快速的导航。让我们来看一个例子。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .pagination {
            display: flex;
            list-style: none;
            padding: 0;
            margin: 10px;
        }
        .pagination a {
            text-decoration: none;
            padding: 8px 12px;
            color: #333;
            transition: background-color 0.4s;
            border: 2px solid black;
            margin: 2px;
        }
        .prev-next{
            background-color: grey;
        }
        .pagination a.active-link {
            background-color: violet;
            color: white;
        }
        .pagination a:hover:not(.active-link) {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="pagination">
        <a href="#" class="prev-next">< Previous</a>
        <a href="#" class="active-link">Page 1</a>
        <a href="#">Page 2</a>
        <a href="#">Page 3</a>
        <a href="#">Page 4</a>
        <a href="#" class="prev-next">Next ></a>
    </div>
</body>

</html>

面包屑分页是一种导航方法，它向用户显示他们到达当前页面所经过的路径。让我们来看一个设计面包屑分页的例子。

示例

<!DOCTYPE html>
<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>

使用列表的分页

我们还可以使用无序列表（<ul>）和列表项（<li>）来创建分页。让我们来看一个例子。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .pagination {
            display: flex;
            padding: 0;
            list-style: none;
        }
        .pagination li {
            margin: 5px;
        }
        .pagination a {
            text-decoration: none;
            padding: 8px 12px;
            color: #333;
            border: 2px solid black;
        }
        .pagination a:hover {
            background-color: pink;
        }
        .pagination .active-link {
            background-color: violet;
            color: white;
        }
    </style>
</head>

<body>
   <ul class="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>
打印页面
上一页
下一页
广告