CSS列表
从某种意义上讲,不是描述性的文本的任何内容都可以认为是列表。人口普查、太阳系、家谱、参观菜单,甚至你的所有朋友都可以表示为一个列表或者是列表的列表。
CSS列表 - list-style 属性
list-style 简写属性在一个声明中设置所有的列表属性。
该属性是一个简写属性,涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素,所以在普通的 HTML 和 XHTML 中只能用于 li 元素,不过实际上它可以应用到任何元素,并由 list-item 元素继承。
可以按顺序设置如下属性:list-style-type
list-style-position
list-style-image
新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。
语法如下:
ul { list-style:square inside url('images/arrow.gif'); }
具体参数值在下面 一 一介绍
CSS列表 - list-style-image 属性
list-style-image 属性使用图像来替换列表项的标记。
语法如下:
ul { list-style-image:url("images/arrow.gif"); }
页面上显示为
- 咖啡
- 茶
- 可口可乐
CSS列表 - list-style-position 属性
list-style-position 属性设置在何处放置列表项标记。
语法如下:
ul { list-style-position:inside; }
页面上显示为
- 该列表的 list-style-position 的值是 "inside":
- 茶
- 可口可乐
- 该列表的 list-style-position 的值是 "outside":
- 茶
- 可口可乐
CSS列表 - list-style-type 属性
list-style-type 属性设置列表项标记的类型。
设置不同的列表样式:
语法:
ul.circle { list-style-type:circle;} ul.square { list-style-type:square;} ol.upper-roman { list-style-type:upper-roman;} ol.lower-alpha { list-style-type:lower-alpha;}
页面上显示为
- 空心圆
- 实心方块
- 大写拉丁字母
- 小写拉丁字母