close

list-style-type

  1. none        無標記。
  2. disc  默認。標記是實心圓。
  3. circle       標記是空心圓。
  4. square     標記是實心方塊。
  5. decimal   標記是數位。
  6. decimal-leading-zero      0開頭的數位標記。(01, 02, 03, 等。)
  7. lower-roman   小寫羅馬數字(i, ii, iii, iv, v, 等。)
  8. upper-roman   大寫羅馬數字(I, II, III, IV, V, 等。)
  9. lower-alpha     小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
  10. upper-alpha    大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
  11. 還有,自己查。以上來自:http://www.w3school.com.cn/cssref/pr_list-style-type.asp

清單前使用圖片,先去掉標記再放上圖片:

                list-style-type: none;
                list-style-image: url("picture/arrow2.gif")

清單前使用符號的位置有inside、outside兩種,其中前者會跟著清單一起走,後者不會。


<!DOCTYPE html>

<html lang="zh-tw">

    <head>

       <title>第二個網頁測試</title>

       <meta charset="UTF-8">

       <style>

           .first li {

              list-style-type: none;

              list-style-image: url("picture/arrow1.gif");

           }

           .second li {

              list-style-type: none;

              list-style-image: url("picture/arrow2.gif")

           }

 

           .third li {

              list-style-type: none;

              list-style-image: url("picture/arrow3.png")

           }

           .in {

              background-color: yellow;

           list-style-position: inside

           /*套用時注意,如果沒有把list-style-position設定成inside,那新設定的清單(圖片)跟清單列本身不在一起,之後調整可能出錯

            例如頭身分離之類的(清單點「」跟清單內容分離,可以看.in.out背景顏色圈的範圍就不一樣)*/

           }

           #out {/*#開頭的是id*/

              background-color: #EE7700;

              list-style-position: outside

           }

 

       </style>

 

    </head>

    <body>

 

       <h2 >子清單中國朝代服飾</h2>

       <ol class = "first"><!--設定這一層的標籤套用是.first的設計,注意如果下面的子類別沒有設定,則也會套用此設定-->

           <li>

              <!--在唐朝裡增加第二層子清單,唐朝服飾-->

              <ul class = "second">

                  <li>

                     齊胸儒裙

                  </li><!--在唐朝服飾裡增加第三層子清單,服飾資料-->

                  <ol class = "third">

                     <li>

                         貴族

                     </li>

                     <li>

                         盛唐

                     </li>

                  </ol>

                  <li class="in">

                     圓領袍

                  </li>

                  <li id="out"><!--只能使用一次的id-->

                     坦領裙

                  </li>

              </ul>

           </li><!--在唐朝裡增加子清單結束-->

           <li>

             

           </li>

           <li>

             

           </li>

           <li>

             

           </li>

           <li>

             

           </li>

       </ol><!--清單結束-->

 

    </body>

</html>


undefined

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 乙方 的頭像
    乙方

    學習筆記專區

    乙方 發表在 痞客邦 留言(0) 人氣()