list 是 "列表" 的意思, 在 CSS 中指的是一系列的列表属性. CSS 列表属性允许你放置, 改变列表项标志, 或者将图像作为列表项标志.
从某种意义上讲, 不是描述性的文本的任何内容都可以认为是列表. 人口普查, 太阳系, 家谱, 参观菜单, 甚至你的所有朋友都可以表示为一个列表或者是列表的列表.
由于列表如此多样, 这使得列表相当重要, 所以说, CSS 中列表样式不太丰富确实是一大憾事.
列表类型(list-style-type 属性)
要影响列表的样式, 最简单 (同时支持最充分) 的办法就是改变其标志类型.
例如, 在一个无序列表中, 列表项的标志 (marker) 是出现在各列表项旁边的圆点. 在有序列表中, 标志可能是字母, 数字或另外某种计数体系中的一个符号.
要修改用于列表项的标志类型, 可以使用属性 list-style-type:
ul {list-style-type : square}
上面的声明把无序列表中的列表项标志设置为方块.
列表项图像(list-style-image 属性)
有时, 常规的标志是不够的. 你可能想对各标志使用一个图像, 这可以利用 list-style-image 属性做到:
ul li {list-style-image : url(xxx.gif)}
只需要简单地使用一个 url() 值, 就可以使用图像作为标志.
列表标志位置(list-style-position 属性)
CSS2.1 可以确定标志出现在列表项内容之外还是内容内部. 这是利用 list-style-position 完成的.
简写列表样式(list-style 属性)
为简单起见, 可以将以上 3 个列表样式属性合并为一个方便的属性: list-style, 就像这样:
li {list-style : url(example.gif) square inside}
list-style 的值可以按任何顺序列出, 而且这些值都可以忽略. 只要提供了一个值, 其它的就会填入其默认值.
示例:
- <html>
- <head>
- <style type="text/css">
- ul { list-style: square inside url('eg_arrow.gif') }
- </style>
- </head>
- <body>
- <ul>
- <li>
- 咖啡
- </li>
- <li>
- 茶
- </li>
- <li>
- 可口可乐
- </li>
- </ul>
- </body>
- </HTML>
效果图:
更多 web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17614.html