顯示列表
- ×
麥克風
網站設計者 - ×
吉爾
支持 - ×
簡
會計
基本清單
- 吉爾
- 前夕
- 亞當
鑲上名單
- 吉爾
- 前夕
- 亞當
表頭
名稱
- 吉爾
- 前夕
- 亞當
例
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
試一試» 清單作為一個卡
- 吉爾
- 前夕
- 亞當
中心名單
- 吉爾
- 前夕
- 亞當
彩色列表
- 吉爾
- 前夕
- 亞當
彩色列表項
- 吉爾
- 前夕
- 亞當
Hoverable名單
在W3-hoverable類添加一個灰色的背景色在鼠標懸停每個列表項：
- 吉爾
- 前夕
- 亞當
如果你想要一個特定的懸停顏色，添加任何的W3-懸停類的每個<li>元素：
- 吉爾
- 前夕
- 亞當
可關閉的名單
點擊字母“X”關閉/隱藏列表項：
- 吉爾點¯x
- 亞當點¯x
- 夏娃點¯x
例
<li>Jill
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn w3-margin-right w3-medium">x</span>
</li>
試一試» 加厚名單
- 吉爾
- 前夕
- 亞當
- 吉爾
- 前夕
- 亞當
例
<ul class="w3-ul">
<li class="w3-padding-hor-16">Jill</li>
<li
class="w3-padding-hor-16">Eve</li>
<li class="w3-padding-hor-16">Adam</li>
</ul>
試一試» 頭像列表
- X 麥克風
網站設計者 - X 吉爾
支持 - X 簡
會計
例
<ul class="w3-ul w3-card-4">
<li class="w3-padding-hor-16">
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn w3-padding">x</span>
<img src="img_avatar2.png"
class="w3-left w3-circle" style="width:60px">
<span
class="w3-xlarge">Mike</span><br>
<span>Web
Designer</span>
</li>
</ul>
試一試» 微小的列表
- 吉爾
- 前夕
- 亞當
小列表
- 吉爾
- 前夕
- 亞當
大列表
- 吉爾
- 前夕
- 亞當
XLARGE名單
- 吉爾
- 前夕
- 亞當
XXLarge名單
- 吉爾
- 前夕
- 亞當
XXXLarge名單
- 吉爾
- 前夕
- 亞當
巨型名單
- 吉爾
- 前夕
- 亞當