显示列表
- ×
麦克风
网站设计者 - ×
吉尔
支持 - ×
简
会计
基本清单
- 吉尔
- 前夕
- 亚当
镶上名单
- 吉尔
- 前夕
- 亚当
表头
名称
- 吉尔
- 前夕
- 亚当
例
<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名单
- 吉尔
- 前夕
- 亚当
巨型名单
- 吉尔
- 前夕
- 亚当