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

W3.CSS Badges (徽章)

2020-12-02 13:43 更新

W3.CSS 僅提供一種徽章類：

類	定義
w3-badge	圓形黑色徽章

徽章

w3-badge 類創(chuàng)建一個(gè)圓形徽章，默認(rèn)顏色是黑色。

實(shí)例

Updates 9

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

彩色徽章

使用 w3-color 類更改徽章的顏色：

實(shí)例

新聞 6

評論 8

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

按鈕中的徽章

w3-badge 類可以在其他元件內(nèi)部使用：

實(shí)例

<button class="w3-btn w3-black">按鈕

1

</button>

<button class="w3-btn w3-red">按鈕

2

</button>

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

列表中的徽章

實(shí)例

</ul>

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

w3-right 類可以將元素浮動到列表右側(cè)。

這非常適合帶有徽章的列表：

實(shí)例

</ul>

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

表格中的徽章

實(shí)例

<tr>

</tr>

<tr>

</tr>

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

徽章的大小

默認(rèn)情況下，徽章將繼承其容器的大小。

w3-size 類（w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo）可以被用來修改徽章的尺寸。

您可能要為大型徽章添加一些額外的填充：

實(shí)例

66

66

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

UTF-8 徽章

由于 HTML5 支持 UTF-8 字符集，因此您可以將 Dingbats 用于單個(gè)數(shù)字的徽章。

實(shí)例

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

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

← W3.CSS Input (輸入)

W3.CSS Tags (標(biāo)簽) →

寫筆記

我要補(bǔ)充

W3.CSS Badges (徽章)

徽章

實(shí)例

彩色徽章

實(shí)例

按鈕中的徽章

實(shí)例

列表中的徽章

實(shí)例

實(shí)例

表格中的徽章

實(shí)例

徽章的大小

實(shí)例

UTF-8 徽章

實(shí)例

推薦文章

推薦教程

推薦課程