CSS入门教程-列表(list)

发布时间:2020-02-18编辑:脚本学堂
CSS入门教程-列表(list),在XHTML中我们无法对列表项目符号做出更改,而CSS赋予了我们这样的能力

在XHTML中我们无法对列表项目符号做出更改,而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>
       ……