免費AI編程助手
W3.CSS Pagination (分頁)
基本分頁
如果您的網(wǎng)站上有很多頁面，則可能需要使用某種分頁。
要創(chuàng)建基本分頁，請使用欄（w3-bar）中的按鈕（w3-button）。
實例
<div class="w3-bar">
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
要刪除按鈕之間的空格，請?zhí)砑?nbsp;w3-bar-item 類：
實例
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button">1</a>
<a href="#" class="w3-bar-item w3-button">2</a>
<a href="#" class="w3-bar-item w3-button">3</a>
<a href="#" class="w3-bar-item w3-button">4</a>
<a href="#" class="w3-bar-item w3-button">5</a>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
分頁箭頭
使用圖標庫中的HTML實體或圖標添加分頁箭頭：
實例
<div class="w3-bar">
<a href="#" class="w3-button">?</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
<a href="#" class="w3-button">?</a>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
活動/當前鏈接
使用 w3-color 類別之一來指示用戶所在的頁面：
實例
<div class="w3-bar">
<a href="#" class="w3-button">?</a>
<a href="#" class="w3-button w3-green">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">?</a>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
懸停顏色
默認情況下，將鼠標移到分頁鏈接上時，它們將變?yōu)榛疑尘吧?。使用任?strong>w3-hover- color類來更改懸停顏色：
實例
<div class="w3-bar">
<a href="#" class="w3-button w3-hover-purple">?</a>
<a href="#" class="w3-button w3-hover-green">1</a>
<a href="#" class="w3-button w3-hover-red">2</a>
<a href="#" class="w3-button w3-hover-blue">3</a>
<a href="#" class="w3-button w3-hover-black">4</a>
<a href="#" class="w3-button w3-hover-orange">?</a>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
分頁大小
使用w3-tiny，w3-small，w3-large，w3-xlarge，w3-xxlarge或 w3-xxxlarge來設(shè)置分頁大?。?/p>
分頁居中
要使分頁居中，請將“ w3-bar”元素放在“ w3-center”元素內(nèi)：
實例
<div class="w3-center">
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button">?</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">?</a>
</div>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
分頁邊框
添加 w3-border 類以創(chuàng)建帶有邊框的分頁：
圓角分頁
在 w3-border 旁邊添加 w3-round 類以獲取圓角邊框：
其他分頁示例
w3-bar 類還可用于創(chuàng)建下一頁/上一頁按鈕：
實例
<a href="#" class="w3-button">? 上一頁</a>
<a href="#" class="w3-button w3-right">下一頁 ?</a>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
w3-bar 類也可以用于創(chuàng)建嵌入式菜單：
實例
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-dark-grey">主頁</a>
<a href="#" class="w3-bar-item w3-button">鏈接 1</a>
<a href="#" class="w3-bar-item w3-button">鏈接 2</a>
<a href="#" class="w3-bar-item w3-button">鏈接 3</a>
</div>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
更多建議：