Web Standards Solutions 網頁設計標準規格

清單LIST

方法A:以<br/>拆解
  Apples<br/>
  Spaghetti<br/>
  Green Beans<br/>
  Milk<br/>
  Five Foot Loaf of Anthony's Italian Bread<br/>
  可能有拆行的問題

示範

Apples

Spaghetti

Green Beans

Milk

Five Foot Loaf of Anthony's Italian Bread

方法B:咬人的圓點
  <li>Apples<br/>
  <li>Spaghetti<br/>
  <li>Green Beans<br/>
  <li>Milk<br/>
  <li>Five Foot Loaf of Anthony's Italian Bread<br/>
  W3C規格，標籤最後都必須閉合起來

示範

Apples

Spaghetti

Green Beans

Milk

Five Foot Loaf of Anthony's Italian Bread

方法C:更進一步
  <li>Apples</li>
  <li>Spaghetti</li>
  <li>Green Beans</li>
  <li>Milk</li>
  <li>Five Foot Loaf of Anthony's Italian Bread</li>
  因為li是區塊層級(block-level)的元件，因此在使用的時候不必加上</br>標籤，
  每個項目就會自成一行。

示範

Apples

Spaghetti

Green Beans

Milk

Five Foot Loaf of Anthony's Italian Bread

方法D:愉快的包裝者
  <ul>
    <li>Apples</li>
    <li>Spaghetti</li>
    <li>Green Beans</li>
    <li>Milk</li>
    <li>Five Foot Loaf of Anthony's Italian Bread</li>
  </ul>

示範

• Apples


• Spaghetti


• Green Beans


• Milk


• Five Foot Loaf of Anthony's Italian Bread

更多技巧
扔掉圓點
  ul{
   list-style: none; /*扔掉圓點*/
   padding-left: 0;  /*關掉內縮*/
  }

使用自訂圓點符號把清單變華麗
  ul{
   list-style-image: url(fancybullet.gif); /*在有些瀏覽器上有對齊的問題*/
  }
改用以下方式
  ul{
   list-style: none
  }
  li{
   background: url(fancybullet.gif) no-repeat 0 50%;
   padding-left: 17px;
  }

導覽清單
  <ul id="minitabs">
    <li><a href="/apples/" class="active">Apples</a></li>
    <li><a href="/spaghetti/" class="active">Spaghetti</a></li>
    <li><a href="/greenbeans/" class="active">Green Beans</a></li>
    <li><a href="/milk/" class="active">Milk</a></li>
  </ul>
  
  #minitabs{
   margin: 0;
   padding: 0 0 20px 10px;
   border-bottom: 1px solid #696;
  }
  #minitabs li{
   margin: 0;
   padding: 0;
   display: inline;
   list-style-type: none;
  }
  #mintabs a{ /*將導覽清單浮動到左邊顯示*/
   float: left;
   line-height: 14px;
   font-weight: bold;
   margin: 0 10px 4px 10px;
   text-decoration: none;
   color: #9c9;
  }
  #minitabs a.active, #minitabs a:hover{ /*加上連結*/
   padding-bottom: 2px;
   color: #363;
  }
  #minitabs a:hover{
   border-bottom: 4px solid #696;
   color: #696;
   background: url(tab_pyra.gif) no-repeat bottom center; /**/
  }

參考資料
1.http://www.simplebits.com/bits/css_tabs.html
2.http://www.alistapart.com/stories/taminglists/#