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/#

    jck11 發表在 痞客邦 PIXNET 留言(0) 人氣()