最新的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>
試一試»