W3.CSS 徽章

9 6 8 33 66 99

W3.CSS 徽章类

W3.CSS 只提供一类徽章：

类	定义
w3-徽章	圆形黑色徽章

徽章

这个w3-徽章类创建一个圆形徽章。默认颜色为黑色。

更新9

示例

Updates 9

亲自试一试»

彩色徽章

用一个w3-颜色更改徽章颜色的类：

消息6注释8

示例

News 6
Comments 8

亲自试一试»

按钮上的徽章

这个w3-徽章类可以在其他元素内部使用：

示例

<button class="w3-btn w3-black">Button
1
</button>

<button class="w3-btn w3-red">Button
2
</button>

亲自试一试»

列表中的徽章

1吉尔
2前夕
3亚当

示例

亲自试一试»

这个w3-右class 将元素向右浮动。

这非常适合带有徽章的列表：

吉尔1
前夕2
亚当3

示例

亲自试一试»

表格中的徽章

名	姓	积分
吉尔	史密斯	50
前夕	杰克逊1	94
亚当	约翰逊2	67
博	尼尔森	50
麦克风	罗斯	35

示例

<tr>
<td>Eve</td>
<td>Jackson 1</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson 2</td>
<td>67</td>
</tr>

亲自试一试»

徽章尺寸

默认情况下，徽章将继承其容器的大小。

这个w3-尺寸类（w3-tiny、w3-small、w3-large、w3-xlarge、w3-xxlarge、w3-xxxlarge、w3-jumbo）可用于修改徽章的大小：

6 6 6

66 66 66

66 66

您可能想为大徽章添加一些额外的填充：

示例

66
66

亲自试一试»

UTF-8 徽章

由于 HTML5 支持 UTF-8 字符集，因此您可以使用标志对于单位数字徽章。

❶ ❷ ❸ ❹ ❺ ➅ ➆ ➇ ➈ ➉

示例

亲自试一试»