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>
列印頁面
上一頁
下一頁
廣告