W3.CSS Tags (标签)

2020-12-01 10:24 更新

W3.CSS为标签提供了一类:

定义
w3标签 矩形黑色标签/标签

提示: 在W3.CSS世界中,标签,标志或符号之间没有真正的区别。


标签是矩形的

w3-tag 类创建矩形标签(标志或符号)。默认颜色是黑色:

实例

<p>Status: <span class="w3-tag">完成</span></p>


尝试一下 »
点击“尝试一下”按钮查看在线实例

彩色标签

使用 w3-color 类别更改标签的颜色:  

实例

<p><span class="w3-tag w3-blue">精彩内容!</span></p>

<p><span class="w3-tag w3-teal">稍后更多!</span></p>


尝试一下 »
点击“尝试一下”按钮查看在线实例

标签尺寸

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

w3-size 类(w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo)可以被用来修改标签的尺寸。

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

实例

<span class="w3-tag w3-jumbo w3-blue">66</span>

<span class="w3-tag w3-jumbo w3-blue w3-padding-large">66</span>


尝试一下 »
点击“尝试一下”按钮查看在线实例

字母标签

实例

<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>


尝试一下 »
点击“尝试一下”按钮查看在线实例

实例

<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>


尝试一下 »
点击“尝试一下”按钮查看在线实例

标志

标志不过是大标签。

实例

<div class="w3-tag w3-xxlarge w3-orange">伦敦动物园</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

路标

实例

<div class="w3-tag w3-round w3-green" style="padding:3px">

  <div class="w3-tag w3-round w3-green w3-border w3-border-white">

    猎鹰岭公园路

  </div>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

显著的标志

w3-size  类可以用来显示显著的标志:

实例

<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">

<strong>

万一发生<br>

紧急情况:<br>

请拼命跑!

</strong>

</span>


尝试一下 »
点击“尝试一下”按钮查看在线实例

实例

<span class="w3-tag w3-jumbo w3-green">

49<span class="w3-xlarge">,99</span>

</span>


尝试一下 »
点击“尝试一下”按钮查看在线实例

圆角标志

w3-round-size 类可用于将圆角添加到标志中:

实例

<span class="w3-tag w3-padding w3-round-large w3-red w3-center">

不要<br>

在水下<br>

呼吸

</span>


尝试一下 »
点击“尝试一下”按钮查看在线实例

指定标签角度

使用标准CSS变换属性来指定标签角度:

实例

<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-10deg)">

</span>


尝试一下 »
点击“尝试一下”按钮查看在线实例

提示: transform:rotate()在IE 9及更低版本中不起作用。


旋转标签

w3-spin 类可以用来让一个符号360度旋转:

实例

<span class="w3-tag w3-spin w3-large">

</span>


尝试一下 »
点击“尝试一下”按钮查看在线实例
以上内容是否对您有帮助:

您可能还喜欢:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号