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

W3.CSS 列表



列表实例

  • × Mike
    Web Designer
  • × Jill
    Support
  • × Jane
    Accountant

基础列表

  • Jill
  • Eve
  • Adam

Example

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

带有边框的列表

  • Jill
  • Eve
  • Adam

Example

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

列表页眉

  • Names

  • Jill
  • Eve
  • Adam

Example

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

列表用于卡片

  • Jill
  • Eve
  • Adam

Example

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

居中对齐的列表

  • Jill
  • Eve
  • Adam

Example

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

带有颜色的列表

  • Jill
  • Eve
  • Adam

Example

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

带有颜色的列表项

  • Jill
  • Eve
  • Adam

Example

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

悬停效果的列表

当鼠标悬停在列表项时, w3-hoverable 类会添加灰色背景颜色:

  • Jill
  • Eve
  • Adam

Example

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

如果要使用特定的悬停颜色,请将 w3-hover-classes 类 添加到每一个 <li> 元素中

  • Jill
  • Eve
  • Adam

Example

<li class="w3-hover-red">Jill</li>
尝试一下 »

可关闭的列表

点击字母 “x” 可关闭/隐藏列表项:

  • Jill x
  • Adam x
  • Eve x

Example

<li>Jill
  <span onclick="this.parentElement.style.display='none'"
  class="w3-closebtn w3-margin-right w3-medium">x</span>
</li>
尝试一下 »


填充列表

  • Jill
  • Eve
  • Adam
  • Jill
  • Eve
  • Adam

Example

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

头像列表

  • x Mike
    Web Designer
  • x Jill
    Support
  • x Jane
    Accountant

Example

<ul class="w3-ul w3-card-4">
  <li class="w3-padding-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>
尝试一下 »

微小列表

  • Jill
  • Eve
  • Adam

Example

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

小号列表

  • Jill
  • Eve
  • Adam

Example

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

大号列表

  • Jill
  • Eve
  • Adam

Example

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

超大号列表

  • Jill
  • Eve
  • Adam

Example

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

超超大号列表

  • Jill
  • Eve
  • Adam

Example

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

超超超大号列表

  • Jill
  • Eve
  • Adam

Example

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

巨型列表

  • Jill
  • Eve
  • Adam

Example

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