最新的Web开发教程
 

W3.CSS列表


显示列表

  • × 麦克风
    网站设计者
  • × 吉尔
    支持
  • ×
    会计

基本清单

  • 吉尔
  • 前夕
  • 亚当

<ul class="w3-ul">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
试一试»

镶上名单

  • 吉尔
  • 前夕
  • 亚当

<ul class="w3-ul w3-border">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
试一试»

表头

  • 名称

  • 吉尔
  • 前夕
  • 亚当

<ul class="w3-ul w3-border">
  <li><h2>Names</h2></li>
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
试一试»

清单作为一个卡

  • 吉尔
  • 前夕
  • 亚当

<ul class="w3-ul w3-card-4">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
试一试»

中心名单

  • 吉尔
  • 前夕
  • 亚当

<ul class="w3-ul w3-center">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
试一试»

彩色列表

  • 吉尔
  • 前夕
  • 亚当

<ul class="w3-ul w3-red">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
试一试»

彩色列表项

  • 吉尔
  • 前夕
  • 亚当

<ul class="w3-ul">
  <li class="w3-blue">Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
试一试»

Hoverable名单

W3-hoverable类添加一个灰色的背景色在鼠标悬停每个列表项:

  • 吉尔
  • 前夕
  • 亚当

<ul class="w3-ul w3-hoverable">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
试一试»

如果你想要一个特定的悬停颜色,添加任何的W3-悬停类的每个<li>元素:

  • 吉尔
  • 前夕
  • 亚当

<li class="w3-hover-red">Jill</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>
试一试»

微小的列表

  • 吉尔
  • 前夕
  • 亚当

<ul class="w3-ul w3-tiny">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
试一试»

小列表

  • 吉尔
  • 前夕
  • 亚当

<ul class="w3-ul w3-small">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
试一试»

大列表

  • 吉尔
  • 前夕
  • 亚当

<ul class="w3-ul w3-large">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
试一试»

XLARGE名单

  • 吉尔
  • 前夕
  • 亚当

<ul class="w3-ul w3-xlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
试一试»

XXLarge名单

  • 吉尔
  • 前夕
  • 亚当

<ul class="w3-ul w3-xxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
试一试»

XXXLarge名单

  • 吉尔
  • 前夕
  • 亚当

<ul class="w3-ul w3-xxxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
试一试»

巨型名单

  • 吉尔
  • 前夕
  • 亚当

<ul class="w3-ul w3-jumbo">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
试一试»