CSS HTML實現頁面分頁功能

分頁功能是網頁中常用的功能之一，特別是在一些數據較多的網站中，為了方便用戶瀏覽，往往需要將數據分頁顯示。本文將介紹如何使用CSS和HTML實現一個簡單的分頁功能。

一、簡介

實現分頁功能的方法有很多，常見的有使用JavaScript、jQuery、Ajax等等。而本文介紹的方法是使用CSS和HTML來實現一個簡單的分頁功能。這種方法的優點是可以降低網頁的載入時間，不需要額外載入JavaScript等文件。

二、實現步驟

本文將分為兩部分介紹如何實現一個簡單的分頁功能。第一部分將介紹如何使用HTML和CSS創建分頁的整體結構；第二部分將介紹如何使用CSS樣式來實現分頁的效果。

三、HTML結構

首先我們需要創建分頁的整體結構，具體代碼如下：

<div class="pagination">
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
  </ul>
</div>

代碼中，我們使用了一個div元素來包裹整個分頁結構，對應的CSS樣式為：

.pagination {
  text-align: center;
  margin-top: 20px;
}

.pagination ul {
  display: inline-block;
  padding:0;
  margin: 0;
  list-style: none;
}

.pagination li {
  display: inline;
  margin-right: 5px;
}

.pagination li a {
  display: block;
  padding: 5px 10px;
  color: #333;
  text-decoration: none;
}

.pagination li a:hover {
  background-color: #333;
  color: #fff;
}

通過以上代碼，我們就創建了一個簡單的分頁結構。下一步我們將通過CSS樣式來實現分頁的效果。

四、CSS樣式

通過CSS樣式，我們可以控制分頁的顯示效果。具體代碼如下：

.pagination li.active a {
  background-color: #333;
  color: #fff;
}

.pagination li.disabled a {
  color: #ccc;
  cursor: not-allowed;
  pointer-events: none;
}

.pagination li:first-child a {
  border-radius: 3px 0 0 3px;
}

.pagination li:last-child a {
  border-radius: 0 3px 3px 0;
}

.pagination li:nth-child(n+4):nth-last-child(n+4),
.pagination li:nth-last-child(n+4):not(:nth-child(n+4)):not(:last-child) {
  display: none;
}

以上CSS樣式實現了以下3個效果：

• 當前頁碼高亮顯示
• 禁用狀態的頁碼顏色變暗
• 顯示當前頁碼及前後3個頁碼，其餘頁碼隱藏

通過以上CSS樣式，我們就成功實現了一個簡單的分頁功能。最終效果如下圖所示：

五、總結

本文介紹了如何使用CSS和HTML來實現一個簡單的分頁功能，其效果可媲美使用JavaScript等技術的分頁效果。通過以上方法，我們可以在不增加網頁載入時間的情況下，為用戶提供高效、方便的分頁瀏覽體驗。