CSS - 分頁：初學者指南

你好，未來的網頁設計超級巨星！今天，我們要一起探索 CSS 分頁的奇妙世界。別擔心如果你從來沒有寫過一行代碼——我將會是你這次興奮旅程中的友好導遊。在本教程結束時，你將會像專業人士一樣創建有美感的實用分頁！

CSS - Pagination

什麼是分頁？

在我們開始之前，讓我們先來了解一下分頁到底是什麼。想像你正在閱讀一本書。與其將所有文字都塞在從未結束的一頁上，它被分成了易於管理的部分——這就是實體世界的分頁。在網站上，分頁有助於將長長的內容列表（如搜索結果或部落格文章）分成獨立的頁面。這就像是給用戶一個虛擬的“翻頁”按鈕！

現在，讓我們捲起袖子開始吧！

第一步：添加 HTML 標記

首先，我們需要創建我們分頁的基本結構。這就像是在搭建我們設計的骨架。

<div class="pagination">
<a href="#">&laquo;</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">&raquo;</a>
</div>

在這個例子中，我們創建了一個類為 "pagination" 的 <div>。裡面有幾個 <a> 標籤（鏈接），代表我們的頁數。« 和 » 是左箭頭和右箭頭的特殊字符——夠時尚吧？

第二步：定義 CSS 類

現在我們有了骨架，讓我們來添加一些風格！我們將從一些基本的 CSS 開始，給我們的分頁一個形狀。

.pagination {
display: inline-block;
}

.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}

這段代碼的作用如下：

display: inline-block; 讓我們的分頁容器行為像行內元素，但允許我們設定寬度和高度。
我們正在風格化我們分頁 div 內的所有 <a> 標籤。
float: left; 讓我們的鏈接水平對齊。
padding 給我們的文字一些間距。
text-decoration: none; 移除我們鏈接的下劃線。

第三步：分頁鏈接風格

讓我們讓我們的分頁鏈接看起來更有趣一些！

.pagination a.active {
background-color: #4CAF50;
color: white;
}

.pagination a:hover:not(.active) {
background-color: #ddd;
}

這段代碼做了兩件很酷的事情：

它為“活動中”的頁面（當前頁面）添加了一個綠色背景和白色文字。
它為所有其他鏈接添加了一個懸停效果，當你將鼠標悬停在上面時，會改變它們的背景色。

CSS 簡單分頁

恭喜你！你剛剛創建了一個簡單且功能完備的分頁。但為什麼要停在那裡？讓我們探索一些更有趣的變化！

CSS 活動和懸停分頁

想要讓你的分頁更具互動性？試試這個：

.pagination a {
transition: background-color 0.3s;
}

.pagination a.active {
background-color: #4CAF50;
color: white;
}

.pagination a:hover:not(.active) {
background-color: #ddd;
}

transition 屬性在懸停時添加了一個平滑的顏色變化效果。這就像魔法一樣！

CSS 圓角活動和懸停按鈕

讓我們給我們的按鈕添加一些曲線：

.pagination a {
border-radius: 5px;
margin: 0 4px;
}

border-radius 圓滑了我們按鈕的角落，而 margin 在它們之間添加了一些間距。這樣看起來不是很酷嗎？

CSS 懸停過渡效果

想要添加一些噱頭？試試這個微妙的比例效果：

.pagination a {
transition: transform 0.3s;
}

.pagination a:hover {
transform: scale(1.1);
}

現在，當你懸停時，你的鏈接會稍微變大。它們就像是在伸手等你點擊！

CSS 有邊框的分頁

讓我們添加一些邊框來讓我們的分頁脫穎而出：

.pagination a {
border: 1px solid #ddd;
}

這條簡單的線條為每個鏈接添加了一個浅灰色的邊框。這是多麼小的改變，卻能帶來如此大的差別！

CSS 邊框圓角

想要讓那些邊框看起來更柔和？讓我們將它們圓角化：

.pagination a {
border-radius: 50%;
}

這將我們的方形按鈕變成了完美的圓形。這多有型！

CSS 鏈接之間的間距

有時候，我們需要更多的間距：

.pagination a {
margin: 0 4px;
}

這在每個鏈接之間添加了一個小間距，給你的分頁一種更寬敞的感覺。

CSS 分頁大小

一個大小適合所有人。讓我們學習如何調整大小：

.pagination a {
font-size: 22px;
padding: 10px 20px;
}

試試這些值，為你的設計找到完美的尺寸！

CSS 居中分頁

想要你的分頁在頁面中央看起來很漂亮？

.pagination {
text-align: center;
}

這行簡單的代碼將你的整個分頁塊居中。

讓我們添加一些導航按鈕：

<div class="pagination">
<a href="#">&laquo; 上一頁</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">下一頁 &raquo;</a>
</div>

.pagination a:first-child,
.pagination a:last-child {
background-color: #f1f1f1;
font-weight: bold;
}

這添加了“上一頁”和“下一頁”按鈕，並為它們提供了不同的風格。

CSS 带有面包屑的分頁

想要向用戶顯示他們在頁面序列中的位置？試試這個：

<div class="pagination">
<a href="#">&laquo;</a>
<a href="#">1</a>
<a href="#" class="active">2</a>
<a href="#">3</a>
<a href="#">&raquo;</a>
<p>頁面 2 / 3</p>
</div>

.pagination p {
margin-left: 10px;
display: inline-block;
}

這添加了一個文本指示器，顯示當前頁和總頁數。

CSS 带有列表的分頁

最後，讓我們試試一種列表樣式的分頁：

<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#" class="active">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">&raquo;</a></li>
</ul>

.pagination {
list-style-type: none;
padding: 0;
}

.pagination li {
display: inline-block;
}

這創建了一個乾淨的、基于列表的分頁佈局。

至此，各位！你剛剛學會了 CSS 分頁的來龍去脈。記住，掌握這些技巧的關鍵在於練習。所以，去吧，嘗試這些風格，混合搭配，創造你自己的獨特分頁設計。誰知道呢？你可能會創造出網頁設計中的下一個大熱門！

快樂編程，願你的頁面總是完美分頁！

方法	描述
簡單分頁	帶有最小風格的基本分頁
活動和懸停分頁	帶有懸停效果的互動分頁
圓角活動和懸停按鈕	帶有圓角的分頁按鈕
懸停過渡效果	帶有平滑過渡效果的分頁
有邊框的分頁	帶有鏈接邊框的分頁
邊框圓角	带有完全圓形按鈕的分頁
鏈接之間的間距	在鏈接之間添加間距的分頁
分頁大小	調整分頁元素的大小
居中分頁	在頁面上居中分頁
带有上一頁和下一頁按鈕的分頁	添加導航按鈕的分頁
带有面包屑的分頁	在分頁中包含頁面指示器的分頁
带有列表的分頁	使用無序列表創建的分頁