Dreamweaver 教程-CSS列表(list)

1.無序列表項(xiàng)目樣式屬性(list-style-type)

……
  <style type="text/css">
  .w1 { list-style-type:circle;}
  .w2 { list-style-type:square;}
  .w3 { list-style-type:disc ;}
  </style>
        ……
  <ul class="w1">
  <li>無序列表項(xiàng)目1</li>
  <li>無序列表項(xiàng)目2</li>
  <li>無序列表項(xiàng)目3</li>
  </ul>
  <ul class="w2">
  <li >無序列表項(xiàng)目1</li>
  <li >無序列表項(xiàng)目2</li>
  <li >無序列表項(xiàng)目3</li>
  </ul>
  <ul class="w3">
  <li >無序列表項(xiàng)目1</li>
  <li >無序列表項(xiàng)目2</li>
  <li >無序列表項(xiàng)目3</li>
  </ul>
        ……

2.有序列表項(xiàng)目樣式屬性

……
  <style type="text/css">
    .y1 { list-style-type:decimal ;}
      .y2 {list-style-type:upper-roman ;}
      .y3 {list-style-type:lower-roman ;}
  </style>
        ……
  <ol class="y1">
  <li>有序列表項(xiàng)目1</li>
  <li>有序列表項(xiàng)目1</li>
  <li>有序列表項(xiàng)目1</li>
  </ol>
  <ol class="y2">
  <li>有序列表項(xiàng)目1</li>
  <li>有序列表項(xiàng)目1</li>
  <li>有序列表項(xiàng)目1</li>
  </ol>
  <ol class="y3">
  <li>有序列表項(xiàng)目1</li>
  <li>有序列表項(xiàng)目1</li>
  <li>有序列表項(xiàng)目1</li>
  </ol>
        ……

3.用圖片做列表項(xiàng)目符號(list-style-image)

……
  <style type="text/css">
    .xing { list-style-image:url(../../images/list.gif);}
  </style>
        ……
  <ul class="xing" >
  <li>無序列表項(xiàng)目1</li>
  <li>無序列表項(xiàng)目2</li>
  <li>無序列表項(xiàng)目3</li>
  </ul>
        ……