优质的css架构教学,从屌丝到架构师的飞越（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 属性设置列表项标记的类型

实例：

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}

• "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 属性设置在何处放置列表项标记

实例：

ul.inside

{

list-style-position: inside

}

ul.outside

{

list-style-position: outside

}

该列表的 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 属性使用图像来替换列表项的标记

实例：

ul

{

list-style-image: url('/i/eg_arrow.gif')

}

• 咖啡
• 茶
• 可口可乐

5、CSS列表整合

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

list-style-type

list-style-position

list-style-image

实例：

ul

{

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

}

• 咖啡
• 茶
• 可口可乐