閱讀(2.2k) 書簽贊(0) 我要糾錯(cuò)

W3.CSS Bars (欄)

2020-11-23 11:13 更新

Horizontal Bars

Horizontal Bars 是常見(jiàn)的網(wǎng)頁(yè)設(shè)計(jì)元素：

w3-bar 類用于設(shè)置水平條的樣式：

實(shí)例

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

w3-bar-item

類的目的是提供正確的間距，內(nèi)邊距和位置。

Vertical Bars

Vertical bars （側(cè)邊欄）在網(wǎng)頁(yè)設(shè)計(jì)中也很常見(jiàn)：

w3-bar-block 類用于風(fēng)格豎線：

實(shí)例

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

Bar Colors

您可以使用任何顏色來(lái)設(shè)置條形：

實(shí)例

<div class="w3-bar w3-black">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

Hover Colors

您可以使用任何 Hover Colors 來(lái)設(shè)置條形；

將鼠標(biāo)懸停在條上以查看效果：

實(shí)例

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

Bar Links

提供導(dǎo)航是 bar 的典型用途：

實(shí)例

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

Bar Buttons

w3 button 類非常適合于設(shè)計(jì)工具欄中的鏈接。

實(shí)例

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

Responsive Bar

w3 mobile 類非常適合于使 bar 項(xiàng)目具有響應(yīng)性。

實(shí)例

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

Right-Aligned Bar Items

w3 right 類非常適合使 bar 項(xiàng)目右對(duì)齊：

實(shí)例

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

以上內(nèi)容是否對(duì)您有幫助：

← W3.CSS Effects (效果)

W3.CSS Dropdowns (下拉菜單) →

寫筆記

我要補(bǔ)充

W3.CSS Bars (欄)

Horizontal Bars

實(shí)例

Vertical Bars

實(shí)例

Bar Colors

實(shí)例

Hover Colors

實(shí)例

Bar Links

實(shí)例

Bar Buttons

實(shí)例

Responsive Bar

實(shí)例

Right-Aligned Bar Items

實(shí)例

推薦文章

推薦教程

推薦課程