从屌丝到架构师的飞越（CSS篇）-CSS列表

一、介绍

从某种意义上讲，不是描述性的文本的任何内容都可以认为是列表。人口普查、太阳系、家谱、参观菜单，甚至你的所有朋友都可以表示为一个列表或者是列表的列表。

由于列表如此多样，这使得列表相当重要，所以说，CSS 中列表样式不太丰富确实是一大憾事。CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。

二、知识点介绍

1、CSS列表

2、CSS列表标记类型

3、CSS列表标记放置

4、CSS列表标记图像

5、CSS列表整合

三、上课对应视频的说明文档

1、CSS列表

list-style 简写属性在一个声明中设置所有的列表属性

列表语法：

list-style:list-style-type,list-style-position,list-style-image

2、CSS列表标记类型

list-style-type 属性设置列表项标记的类型

实例：

• "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 类型
• 茶
• 可口可乐

3、CSS列表标记放置

list-style-position 属性设置在何处放置列表项标记

实例：

该列表的 list-style-position 的值是 "inside"：

• Earl Grey Tea - 一种黑颜色的茶
• Jasmine Tea - 一种神奇的“全功能”茶
• Honeybush Tea - 一种令人愉快的果味茶

该列表的 list-style-position 的值是 "outside"：

• Earl Grey Tea - 一种黑颜色的茶
• Jasmine Tea - 一种神奇的“全功能”茶
• Honeybush Tea - 一种令人愉快的果味茶

4、CSS列表标记图像

list-style-image 属性使用图像来替换列表项的标记

实例：

• 咖啡
• 茶
• 可口可乐

5、CSS列表整合

list-style:square inside url('/i/arrow.gif');

list-style-type

list-style-position

list-style-image

实例：

• 咖啡
• 茶
• 可口可乐