CSS 所有的列表样式类型
2014-10-12 21:27
211 查看
<html> <head> <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> </head> <body> <ul class="none"> <li>"none" 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="disc"> <li>Disc 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="circle"> <li>Circle 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="square"> <li>Square 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="decimal"> <li>Decimal 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="decimal-leading-zero"> <li>Decimal-leading-zero 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="lower-roman"> <li>Lower-roman 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="upper-roman"> <li>Upper-roman 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="lower-alpha"> <li>Lower-alpha 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="upper-alpha"> <li>Upper-alpha 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="lower-greek"> <li>Lower-greek 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="lower-latin"> <li>Lower-latin 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="upper-latin"> <li>Upper-latin 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="hebrew"> <li>Hebrew 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="armenian"> <li>Armenian 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="georgian"> <li>Georgian 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="cjk-ideographic"> <li>Cjk-ideographic 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="hiragana"> <li>Hiragana 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="katakana"> <li>Katakana 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="hiragana-iroha"> <li>Hiragana-iroha 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="katakana-iroha"> <li>Katakana-iroha 类型</li> <li>茶</li> <li>可口可乐</li> </ul> </body> </html>
"none" 类型
茶
可口可乐
Disc 类型
茶
可口可乐
Circle 类型
茶
可口可乐
Square 类型
茶
可口可乐
Decimal 类型
茶
可口可乐
Decimal-leading-zero 类型
茶
可口可乐
Lower-roman 类型
茶
可口可乐
Upper-roman 类型
茶
可口可乐
Lower-alpha 类型
茶
可口可乐
Upper-alpha 类型
茶
可口可乐
Lower-greek 类型
茶
可口可乐
Lower-latin 类型
茶
可口可乐
Upper-latin 类型
茶
可口可乐
Hebrew 类型
茶
可口可乐
Armenian 类型
茶
可口可乐
Georgian 类型
茶
可口可乐
Cjk-ideographic 类型
茶
可口可乐
Hiragana 类型
茶
可口可乐
Katakana 类型
茶
可口可乐
Hiragana-iroha 类型
茶
可口可乐
Katakana-iroha 类型
茶
可口可乐
将图片作为列表图标
<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>
咖啡
茶
可口可乐
相关文章推荐
- CSS 全部的列表样式类型
- css学习笔记(4)css的所有属性列表
- css控制input不同类型的不同样式
- css统一设置input样式(区分input类型)
- html系统学习之六 <CSS所有的样式属性>
- 让所有的css样式失灵
- 在模板文件.dwt里如何应用样式列表css
- 全站的所有资源通用一个css 样式 边框大小 css使用js
- css统一设置input样式(区分input类型)
- MVVM Light 列表类型控件的处理: Combobox、ListBox、Datagrid等所有能绑定到集合的控件
- CSS 样式中选择器类型区别
- 【CSS布局.3】列表样式定义法
- 对列表应用样式和创建导航条--Css学习笔记(五)
- 《精通CSS高级WEB标准解决方案》第五章、对列表应用样式和创建导航条
- CSS基础应用学习系列(4)――用CSS对列表应用样式
- 改变图标!用户自定义列表样式css说明
- 列表样式类型属性(list-style-type)
- 清除所有默认样式的CSS代码
- CSS教程:解析CSS列表样式属性list-style
- CSS学习系列九:列表样式