标签：
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>
标签：
原文地址：http://www.cnblogs.com/wddoer/p/4343604.html
