W3.CSS 标记(标签和标志)

标签: Done New! More Later!

标记为符号: Falcon Ridge Parkway STOP! WATCH OUT!


W3.CSS 标签类

W3.CSS 为标记、标签和标志提供了一个类:

定义
w3-tag 黑色矩形 tag/label

标记、标签和标志

在 W3.CSS 世界中,标记、标签或标志之间没有真正的区别。


标签是矩形的

w3-tag 类创建一个矩形标签(标签或标志)。 默认颜色为黑色:

状态: Done

实例

<p>Status: <span class="w3-tag">Done</span></p>
亲自试一试 »

彩色标签

使用 w3-color 类来改变标签的颜色:

New!

More Later!

实例

<p><span class="w3-tag w3-blue">New!</span></p>
<p><span class="w3-tag w3-teal">More Later!</span></p>
亲自试一试 »

标签大小

默认情况下,标签将继承其容器的大小。

w3-size 类(w3-tiny、w3-small、w3-large、w3-xlarge、w3-xxlarge、w3-xxxlarge、w3-jumbo ) 可用于修改标签的大小:

6 6 6

66 66 66

66 66

您可能想为大标签添加一些额外的填充:

实例

<span class="w3-tag w3-jumbo w3-blue">66</span>
<span class="w3-tag w3-jumbo w3-blue w3-padding-large">66</span>
亲自试一试 »

字母标签

A U G U S T

实例

<span class="w3-tag w3-xlarge">A</span>
<span class="w3-tag w3-xlarge">U</span>
<span class="w3-tag w3-xlarge">G</span>
<span class="w3-tag w3-xlarge">U</span>
<span class="w3-tag w3-xlarge">S</span>
<span class="w3-tag w3-xlarge">T</span>
亲自试一试 »
S A L E

实例

<span class="w3-tag w3-jumbo w3-red">S</span>
<span class="w3-tag w3-jumbo">A</span>
<span class="w3-tag w3-jumbo w3-yellow">L</span>
<span class="w3-tag w3-jumbo">E</span>
亲自试一试 »

标志

标志只不过是大标签。

London Zoo

实例

<div class="w3-tag w3-xxlarge w3-orange">London Zoo</div>
亲自试一试 »

路标

Falcon Ridge Parkway

实例

<div class="w3-tag w3-round w3-green" style="padding:3px">
  <div class="w3-tag w3-round w3-green w3-border w3-border-white">
    Falcon Ridge Parkway
  </div>
</div>
亲自试一试 »

大标志

w3-size 类可用于显示大标志:

IN CASE OF
EMERGENCY:
RUN LIKE HELL!

实例

<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
<strong>
IN CASE OF<br>
EMERGENCY:<br>
RUN LIKE HELL!
</strong>
</span>
亲自试一试 »
49,99

实例

<span class="w3-tag w3-jumbo w3-green">
49<span class="w3-xlarge">,99</span>
</span>
亲自试一试 »

圆形标志

w3-round-size 类可用于为标志添加圆角:

DO NOT
BREATHE
UNDER WATER

实例

<span class="w3-tag w3-padding w3-round-large w3-red w3-center">
DO NOT<br>
BREATHE<br>
UNDER WATER
</span>
亲自试一试 »

旋转标签

使用标准的 CSS transform 属性来旋转标志:

STOP

实例

<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">
STOP
</span>
亲自试一试 »

注释: transform:rotate() 在 IE 9 及更早版本中不起作用。


旋转标签

w3-spin 类可用于让标志旋转 360 度:

STOP

实例

<span class="w3-tag w3-spin w3-large">
STOP
</span>
亲自试一试 »