W3.CSS Tags (標簽)

2020-12-01 10:24 更新

W3.CSS為標簽提供了一類：

類 定義
w3標簽 矩形黑色標簽/標簽

提示： 在W3.CSS世界中，標簽，標志或符號之間沒有真正的區(qū)別。

標簽是矩形的

w3-tag 類創(chuàng)建矩形標簽（標志或符號）。默認顏色是黑色：

實例

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


嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

彩色標簽

使用 w3-color 類別更改標簽的顏色：  

實例

<p><span class="w3-tag w3-blue">精彩內(nèi)容!</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>

萬一發(fā)生<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及更低版本中不起作用。

旋轉(zhuǎn)標簽

w3-spin 類可以用來讓一個符號360度旋轉(zhuǎn)：

實例

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

停

</span>


嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號