CSS样式-列表

浏览数：28 / 时间：2015年06月09日

CSS列表属性，允许你放置和改变列表项标志，或者将图像作为列表项标志。

1）list-style-type

list-style-type属性用于修改列表项的标志类型。无序属性值有：disc,circle,square,none.

<html>
<head>
<style type="text/css">
<!--  disc小实心圆，ciecle小空心圆，square小实心方块，none无  -->
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head>

<body>
<ul class="disc">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>

<ul class="circle">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>

<ul class="square">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>

<ul class="none">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>

</html>

有序属性值有decimal,lower-roman,upper-roman,lower-alpha,upper-alpha.

<html>
<head>
<style type="text/css">
ol.decimal {list-style-type: decimal}
ol.lroman {list-style-type: lower-roman}
ol.uroman {list-style-type: upper-roman}
ol.lalpha {list-style-type: lower-alpha}
ol.ualpha {list-style-type: upper-alpha}
</style>
</head>

<body>
<ol class="decimal">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>

<ol class="lroman">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>

<ol class="uroman">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>

<ol class="lalpha">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>

<ol class="ualpha">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
</body>

</html>

所有的列表样式类型有：

<style type="text/css">
ul.none {list-style-type: none}
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.decimal {list-style-type: decimal}
ul.decimal-leading-zero {list-style-type: decimal-leading-zero}
ul.lower-roman {list-style-type: lower-roman}
ul.upper-roman {list-style-type: upper-roman}
ul.lower-alpha {list-style-type: lower-alpha}
ul.upper-alpha {list-style-type: upper-alpha}
ul.lower-greek {list-style-type: lower-greek}
ul.lower-latin {list-style-type: lower-latin}
ul.upper-latin {list-style-type: upper-latin}
ul.hebrew {list-style-type: hebrew}
ul.armenian {list-style-type: armenian}
ul.georgian {list-style-type: georgian}
ul.cjk-ideographic {list-style-type: cjk-ideographic}
ul.hiragana {list-style-type: hiragana}
ul.katakana {list-style-type: katakana}
ul.hiragana-iroha {list-style-type: hiragana-iroha}
ul.katakana-iroha {list-style-type: katakana-iroha}
</style>

2）list-style-image

list-style-image属性可以定义一个图像作为列表项标志。

<html>
<head>
<style type="text/css">
ul 
{
list-style-image: url(‘/i/eg_arrow.gif‘)
}
</style>
</head>

<body>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>

</html>

3）list-style-position

list-style-position属性可以确定标志出现在列表项内容之外还是内容内部。

<html>
<head>
<style type="text/css">
ul.inside 
{
list-style-position: inside
}

ul.outside 
{
list-style-position: outside
}
</style>
</head>

<body>
<p>该列表的 list-style-position 的值是 "inside"：</p>
<ul class="inside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>

<p>该列表的 list-style-position 的值是 "outside"：</p>
<ul class="outside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
</body>
</html>

4）list-style

上述各列表属性也可以在一个简写声明list-style中确定。例如：

<html>
<head>
<style type="text/css">
ul 
{
list-style: square inside url(‘/i/eg_arrow.gif‘)
}
</style>
</head>

<body>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>

</html>