3.1　列表

本节主要讲解列表定义以及列表的分类，帮助读者更加了解前端列表的知识。读者需要牢牢掌握这些基础知识才能在面试及笔试中应对自如。

3.1.1　认识列表

容器里面装载着文字或图表的一种形式，叫列表。列表最大的特点就是整齐、整洁、有序。

下面介绍列表类以及背景类属性等知识内容。

1．列表类属性

（1）列表符号样式：list-style-type:disc（实心圆）| circle（空心圆）| square（实心方块）| decimal（数字）| none（去掉列表符号样式）。

（2）使用图片作为列表符号：list-style-image:url（图片路径）。

（3）列表符号位置：list-style-position:outside（默认值，外面）| inside（里面）。

（4）去掉列表符号样式：list-style:none，常用写法是ol,ul{list-style:none;}。

2．背景类属性

（1）背景颜色：background-color:颜色数值。

☆注意☆　颜色值设置方法同字体颜色。

（2）背景图片：background-image:url（背景图片路径）。

☆注意☆　网页中常见的两种图片：img标签引入图片和背景图片。

·　网页中常进行更换的数据型图片使用img标签插入。

·　用来装饰网页，不需要经常更换的图片使用背景图插入。

·　可以在背景图上显示任何的文本和图片。

（3）背景图平铺属性：background-repeat:no-repeat（不平铺）| repeat（平铺）| repeat-x（横向平铺）| repeat-y（纵向平铺）。

（4）背景图位置：background-position:left | center | right | 数值top | center | bottom | 数值。

☆注意☆　①第一个值代表水平方向，第二个值代表垂直方向。②当两个值都为center时，可以省略第二个值。③当设置为数值时，水平方向向右为正值，向左为负值；垂直方向向下为正值，向上为负值。

（5）背景属性简写方式：background:背景色　背景图　背景平铺属性　背景图位置。

例如：background:#f00 url(01.jpg) repeat-x left center。

（6）背景图固定：background-attachment:scroll（默认值）| fixed（固定）。

☆注意☆　当页面出现滚动条时，背景图不跟随滚动条滚动，设置为fixed。

（7）背景图显示原则如下：

·　当容器尺寸等于背景图尺寸时，背景图正好显示在容器中。

·　当容器尺寸大于背景图尺寸时，背景图默认平铺，直至铺满整个容器。

·　当容器尺寸小于背景图尺寸时，背景图只能显示容器范围以内的部分。

（8）网页中常见的图片格式如下。

·　jpg：适用于色彩数量比较丰富的图片，像素点越多越清晰。

·　gif：支持动画，支持透明。

·　png：支持透明。

3.1.2　列表的分类

列表主要分为：无序列表、有序列表和自定义列表。

1．无序列表

无序列表的各个列表项之间没有顺序级别之分，是并列的。

·　使用标签：<ul>，<li>。

·　属性：disc，circle，square。

语法如下所示：

☆注意☆　①<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。②<li>与</li>之间相当于一个容器，可以容纳所有元素。③无序列表会带有自己的样式属性。

2．有序列表

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义。

·　使用标签：<ol>，<li>。

·　属性：A，a，I，i，start。

语法如下所示：

☆注意☆　ol同ul一样，需要注意三个问题，而且实际中用到的ul要比ol多。

3．自定义列表

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

自定义使用标签：<dl>，<dt>，<dd>。

语法如下所示：

代码如下所示：

运行效果如图3-1所示。