免費(fèi)AI編程助手
W3.CSS Tags (標(biāo)簽)
W3.CSS為標(biāo)簽提供了一類：
| 類 | 定義 |
|---|---|
| w3標(biāo)簽 | 矩形黑色標(biāo)簽/標(biāo)簽 |
提示： 在W3.CSS世界中，標(biāo)簽，標(biāo)志或符號(hào)之間沒有真正的區(qū)別。
標(biāo)簽是矩形的
w3-tag 類創(chuàng)建矩形標(biāo)簽（標(biāo)志或符號(hào)）。默認(rèn)顏色是黑色：
彩色標(biāo)簽
使用 w3-color 類別更改標(biāo)簽的顏色：
實(shí)例
<p><span class="w3-tag w3-blue">精彩內(nèi)容!</span></p>
<p><span class="w3-tag w3-teal">稍后更多!</span></p>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
標(biāo)簽尺寸
默認(rèn)情況下，標(biāo)簽將繼承其容器的大小。
w3-size 類（w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo）可以被用來修改標(biāo)簽的尺寸。
您可能要為大型標(biāo)簽添加一些額外的填充：
實(shí)例
<span class="w3-tag w3-jumbo w3-blue">66</span>
<span class="w3-tag w3-jumbo w3-blue w3-padding-large">66</span>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
字母標(biāo)簽
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
標(biāo)志
標(biāo)志不過是大標(biāo)簽。
實(shí)例
<div class="w3-tag w3-xxlarge w3-orange">倫敦動(dòng)物園</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
路標(biāo)
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
顯著的標(biāo)志
w3-size 類可以用來顯示顯著的標(biāo)志：實(shí)例
<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
<strong>
萬一發(fā)生<br>
緊急情況:<br>
請(qǐng)拼命跑!
</strong>
</span>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
實(shí)例
<span class="w3-tag w3-jumbo w3-green">
49<span class="w3-xlarge">,99</span>
</span>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
圓角標(biāo)志
w3-round-size 類可用于將圓角添加到標(biāo)志中：
實(shí)例
<span class="w3-tag w3-padding w3-round-large w3-red w3-center">
不要<br>
在水下<br>
呼吸
</span>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
指定標(biāo)簽角度
使用標(biāo)準(zhǔn)CSS變換屬性來指定標(biāo)簽角度：
實(shí)例
<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-10deg)">
停
</span>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
提示： transform：rotate（）在IE 9及更低版本中不起作用。
旋轉(zhuǎn)標(biāo)簽
w3-spin 類可以用來讓一個(gè)符號(hào)360度旋轉(zhuǎn)：
更多建議：