W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

W3.CSS 标志



显示标志

w3-tag 和 w3-badge 类可用于显示各种标志。


将标签作为标志显示

London Zoo

Example

<div class="w3-tag w3-orange">London Zoo</div>
尝试一下 »

在一行中显示标签

S
A
L
E

Example

<div class="w3-tag w3-red">S</div>
<div class="w3-tag w3-black" >A</div>
<div class="w3-tag w3-yellow">L</div>
<div class="w3-tag w3-black">E</div>
尝试一下 »

显示道路标志

Falcon Ridge Parkway

Example

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

显示大标志

IN CASE OF
EMERGENCY
RUN LIKE HELL !

Example

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

Example

<div class="w3-tag w3-jumbo w3-green">
  <span class="w3-xxlarge">49</span>
  <span class="w3-large">,99</span>
</div>
尝试一下 »

显示圆角标志

DO NOT
BREATHE
UNDER WATER

Example

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

显示旗帜

Example

<div class="w3-display-container w3-white w3-border w3-card-8" style="height:200px;width:350px">
<div class="w3-display-topleft w3-container w3-red" style="width:25%;height:40%"><p></p></div>
<div class="w3-display-topright w3-container w3-red" style="width:60%;height:40%"><p></p></div>
<div class="w3-display-bottomleft w3-container w3-red" style="width:25%;height:40%"><p></p></div>
<div class="w3-display-bottomright w3-container w3-red" style="width:60%;height:40%"><p></p></div>
</div>
尝试一下 »