当前阅读教程:CSS入门到精通 > 所有列表list-style属性 | |||||||||||||||||||||
阅读(22555525) 收藏 赞(5685) 分享 | |||||||||||||||||||||
上一篇: 列表项标记的类型 list-style-type属性 | 下一篇: CSS Table(表格) | ||||||||||||||||||||
浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。 属性定义及使用说明list-style 简写属性在一个声明中设置所有的列表属性。 可以设置的属性(按顺序): list-style-type, list-style-position, list-style-image. 可以不设置其中的某个值,比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。
属性值
实例代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>所有列表list-style属性</title> <!--定义内部样式--> <style> ul { list-style:square url("img/tubiao01.gif"); } </style> </head> <body> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> </body> </html> 效果图实例:有序列表代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>有序列表</title> <!--定义内部样式--> <style> .decimal {list-style-type: decimal} .lroman {list-style-type: lower-roman} .uroman {list-style-type: upper-roman} .lalpha {list-style-type: lower-alpha} .ualpha {list-style-type: upper-alpha} </style> </head> <body> <ol> <li>咖啡</li> <li>茶</li> <li>可口可乐</li> </ol>
<ol> <li>咖啡</li> <li>茶</li> <li>可口可乐</li> </ol>
<ol> <li>咖啡</li> <li>茶</li> <li>可口可乐</li> </ol>
<ol> <li>咖啡</li> <li>茶</li> <li>可口可乐</li> </ol>
<ol> <li>咖啡</li> <li>茶</li> <li>可口可乐</li> </ol> </body> </html> 效果图实例:无序列表代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>无序列表</title> <!--定义内部样式--> <style> 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> <li>咖啡</li> <li>茶</li> <li>可口可乐</li> </ul>
<ul> <li>咖啡</li> <li>茶</li> <li>可口可乐</li> </ul>
<ul> <li>咖啡</li> <li>茶</li> <li>可口可乐</li> </ul>
<ul> <li>咖啡</li> <li>茶</li> <li>可口可乐</li> </ul> </body> </html> 效果图 |
|||||||||||||||||||||
上一篇: 列表项标记的类型 list-style-type属性 | 下一篇: CSS Table(表格) |