CSS笔记（美化列表）

一、列表的基本结构

列表的结构可以分为两种基本类型：有序列表和无序列表。无序列表使用项目符号来标识列表，而有序列表则使用编号来标识列表的项目顺序。

<ul></ul>

标识无序列表

<ol></ol>

标识有序列表

<li></li>

标识列表项目

还有一种特殊列表是定义列表，它包括词条和解释两块内容

<dl></dl>

标识定义列表

<dt></dt>

标识词条

<dd></dd>

标识解释

二、创建列表

1、无序列表

ul与li之间不能插入其他标签

2、有序列表

<ol>

标签包含三个实用的属性

reversed：取值为本身，定义列表降序

start：取值为数字，定义列表起始值

type：取值1、A、a、I、i，定义列表使用的标记类型

3、定义列表

<dl>

标签包含了

<dt>

和

<dd>

标签，一个

<dt>

对应一个或多个

<dd>

4、菜单列表

H5重新定义了H4弃用的

<menu>

标签。

<menu>

可以包含

<command>

和

<menuitem>

三、设计CSS样式

列表在默认状态下效果：左侧附加项目符号，列表项目缩进显示。属性如下：

list-style：复合属性。设置列表项目相关内容

list-style-image：设置列表项目的符号图像

list-style-position：设置列表项目符号的显示位置，根据文本在内或在外排列，取值包括outside|inside

list-style-type：设置列表项目符号的类型

1、项目符号类型

list-style-type属性值：

属性值	说明	属性值	说明
disc	实心圆，默认值	upper-roman	大写罗马数字
circle	空心圆	lower-alpha	小写英文字母
square	实心方块	upper-alpha	大写英文字母
decimal	阿拉伯数字	none	不使用项目符号
lower-roman	小写罗马数字	armenian	传统的亚美尼亚数字
cjk-ideographic	浅白的表意数字	georgian	传统的乔治数字
lower-greek	基本的希腊小写字母	hebrew	传统的希伯莱数字
hiragana	日文平假名字符	hiragana-iroha	日文平假名序号
katakana	日文片假名字符	katakana-iroha	日文片假名序号
lower-latin	小写拉丁字母	upper-latin	大写拉丁字母

2、自定义项目符号

list-style-image:none|<url>