您当时的方位:主页 > 言语编程 > CSS

CSS入门教程——列表(list)

2014-10-22  

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>
……