网页制作第.pptVIP

第4章 列表 主要内容 4.1 列表简介 列表（List） - 在制作网页时，列表经常被用到写提纲和品种 说明书。通过列表标记的使用能使这些内容在 网页中条理清晰、层次分明、格式美观的表现 出来。本章将重点介绍列表标记的使用。 - 顾名思义就是在网页中将相关资料以条目的形 式有序或者无序排列而形成的表。 - 常用的列表有无序列表、有序列表和定义列表 三种。另外，还有不太常用的目录列表和菜单 列表。 4.1 列表简介 表4-1 列表类型及其标记符号 4.2 无序列表 无序列表（Unordered List） - 是一个没有特定顺序的相关条目（也成为列表 项）的集合。 - 在无序列表中，各个列表项之间属并列关系， 没有先后顺序之分，它们之间以一个项目符号 来标记。 4.2 无序列表 基本语法： 4.2 无序列表 语法说明： - 在HTML文件中，可以利用成对的ul/ ul标记来插 入无序列表，其中间的列表项标签li/li（list- items）用来定义列表项序列。 - 使用无序列表标签的TYPE属性，用户可以指定出现在列 表项前的项目符号的样式，其取值以及相对应的符号样 式如下： disc：指定项目符号为一个实心圆点（IE浏览器的默认值是disc）。 circle：指定项目符号为一个空心圆点。 square：指定项目符号为一个实心方块。 4.2 无序列表 示例代码（代码位置4-1.html） 4.2 无序列表 实例代码4-1.html的执行效果如图4-1所示。 4.3 有序列表 4.3.1 有序列表及其编号样式 有序列表（Ordered List） - 有序列表（Ordered List）是一个有特定顺序的相关条 目（也成为列表项）的集合。在有序列表中，各个列表 项有先后顺序之分，它们之间以编号来标记。 4.3.1 有序列表及其编号样式 语法说明： - 在HTML文件中，可以利用成对的ol/ol标记来插入有序列表，其中间的列表项标记li/li用来定义列表项顺序。 - 使用有序列表标记的type属性，用户可以指定出现在列表项前的项目编号的样式，其取值以及相对应的编号样式如下： “1”：指定项目编号为阿拉伯数字（IE浏览器的默认值是disc）； “a”：指定项目编号为小写英文字母； “A”：指定项目编号为大写英文字母； “i”：指定项目编号为小写罗马数字； “I”：指定项目编号为大写罗马数字。 4.3.1 有序列表及其编号样式 程序4-2的执行效果如图4-2所示。 改变程序中type属性的值后，列表项前的项目编号将按指定的样式显示。 4.3.2 编号起始值 通常，在指定列表的编号样式后，浏览器会从“1”、“a”、“A”、“i”或“I”开始自动编号。 而在使用有序列表标记的start属性后，用户则可改变编号的起始值。 start属性值是一个整数，表示从哪一个数字或字母开始编号。例如，设置start=3，则有序列表的列表项编号将从“3”、“c”、“C”、“ⅲ”或“Ⅲ”开始编号。 4.3.2 编号起始值 示例代码!--程序4-3 -- 4.3.3 列表项样式 除了对列表标记ol/ol进行属性设置外，我们还可以对列表项标记li/li进行属性设置。 使用列表项标记li/li的type属性，用户可以指定单个列表项的符号（对于无序列表而言）或编号（对于有序列表而言）。 在列表标记ol/ol的type属性和列表项标记li/li的type属性发生冲突的情况下，所指定的单个列表项遵循li/li的type属性进行显示。 4.3.3 列表项样式 示例代码!--程序4-4 -- 程序4-4在程序4-2的基础上指定了第二个列表项的样式。 4.3.3 列表项样式 所指定的单个列表项只有样式发生了变化，其顺序值大小不变。 列表项标记li/li的type属性只影响当前列表项，后续的列表项标记将恢复遵循列表中设置的type属性。 列表项标记li/litype属性的指定，即使用于无序列表也使用于有序列表。此处，不再针对无序列表举例。 4.4嵌套列表 列表还可以嵌套使用，也就是一个列表中还可以包含有多层子列表。 在网页文件中，对于内容层次较多的情况，使用嵌套列表不仅使网页的内容布局更加合理美观，而且使其内容看起来更加清晰、明了。 嵌套的列表可以是无序列表的嵌套，也可以是有序列