發表於 2013-02
    2,980 觀看次數
    • 00:00
      1. ul / li
    • 01:29
      2. 動手試試看!
    • 04:17
      3. 離題一下 ~ css 的套用
    • 05:50
      4. 重要細節說明
    用 ul / li 設計頁籤
    ul / li 除了可以是一般的項目編號外,常應用在頁籤的設計,例如
    <style>
      .cf:before,
      .cf:after {content: " "; display: table}  /* cf: clearfix */
      .cf:after {clear: both}
      .nav {float:left; list-style:none; padding-left:17px}
    </style>
    <ul class="cf">
      <li class="nav">
        <a href="...">home</a>
      </li>
      <li class="nav">
        <a href="...">animals</a>
      </li>
      ...
    </ul>
    1.
    float: left
    讓項目符號水平排列
    使用 float 要非常有技巧,否則版面會天下大亂的
    通常,我們會在 float 的元素的 parent 套用 clearfix 的 css 設定 (請參考上面的範例)
    原理就請自己參考網站 http://nicolasgallagher.com/micro-clearfix-hack/ 的說明囉
    2.
    list-style: none
    不顯示預設的項目符號
    在這個 case,比較好的做法是放在 li 的上一層 ul
    這樣 ul 底下所有的 li 就不用一個一個的設定
    當然,在 li 設定就可以針對不同的 li 給不同的項目符號
    3.
    padding-left: 10px
    左邊 padding (間距),讓項目符號間有一定的間距

    可以用 margin-left 嗎? 當然可以
    嚴格來說,就這個 case 的 semantic (意義) 而言,margin-left 會比較好
    因為 margin 代表在 li 這個 box 外的邊緣 (margin),意義上是每一個 li 的左邊都空出空間
    而 padding 代表在 li 這個 box 內的間距,意義上是每一個 li 裡面的文字都左邊留下空間
    訪客如要回應,請先 登入
      使用筆記功能,請先 登入
      發表時間 :
      2013-02-19 09:43:19 ( 2013-02)
      觀看次數 :
      2,980
      發表人 :
      QR Code :