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