Dreamweaver 教程-CSS列表(list)

        通过CSS我们可以对无序列表、有序列表的项目符号进行更改。

1.无序列表项目样式属性(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>无序列表项目1</li>
  <li>无序列表项目2</li>
  <li>无序列表项目3</li>
  </ul>
  <ul class="w2">
  <li >无序列表项目1</li>
  <li >无序列表项目2</li>
  <li >无序列表项目3</li>
  </ul>
  <ul class="w3">
  <li >无序列表项目1</li>
  <li >无序列表项目2</li>
  <li >无序列表项目3</li>
  </ul>
        ……

2.有序列表项目样式属性

……
  <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>有序列表项目1</li>
  <li>有序列表项目1</li>
  <li>有序列表项目1</li>
  </ol>
  <ol class="y2">
  <li>有序列表项目1</li>
  <li>有序列表项目1</li>
  <li>有序列表项目1</li>
  </ol>
  <ol class="y3">
  <li>有序列表项目1</li>
  <li>有序列表项目1</li>
  <li>有序列表项目1</li>
  </ol>
        ……

3.用图片做列表项目符号(list-style-image)

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