网页设计与制作 教学课件 作者 朱金华 第6章 列表.pptx

资源描述：

《网页设计与制作 教学课件 作者 朱金华 第6章 列表.pptx》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第6章列表教学目标1.了解列表的概念。2.熟悉列表的分类。3.掌握不同列表的标记和使用。4.了解列表符号位置的设置。教学内容6.1无序列表6.2有序列表6.3嵌套列表6.4定义列表6.5菜单列表6.6图像列表6.7列表符号位置6.8使用列表制作导航教学重点和难点重点：列表的分类、不同列表的标记和使用。难点：不同列表的标记和使用。导入：浏览网易、当当等网站，观察哪些地方使用了列表？列表（List）是指在网页中将相关资料以条目的形式有序或者无序排列而形成的表。常用的列表有无序列表（ul）、有序列表（ol）和定义列表（dl）三种。另外，还

2、有不太常用的目录列表（dir）和菜单列表（menu）。6.1无序列表无序列表（UnorderedList）是一个没有特定顺序的列表项的集合，也称为项目列表。在无序列表中，各个列表项之间属并列关系，没有先后顺序之分，它们之间以一个项目符号来标记。基本语法：

• 列表项1
• 列表项2
• 列表项3
……

语法说明：（1）在HTML文件中，可以利用成对的

标记来插入无序列表，其中间的列表项标签

（list-items）用来定义列表项序列。（2）使用无序列表

3、标签ul的type属性一般使用CSS的list-style来代替，用户可以指定出现在列表项前的项目符号的样式，其取值以及相对应的符号样式如下：disc：指定项目符号为一个实心圆点（默认值是disc，是否使用该值在浏览器中效果都一样）。circle：指定项目符号为一个空心圆点。square：指定项目符号为一个实心方块；none：无项目符号。6.1无序列表6.1无序列表6.2有序列表6.2.1有序列表及其编号样式有序列表（OrderedList）是一个有特定顺序的列表项的集合。在有序列表中，各个列表项有先后顺序之分，它们之间以编号来标记

4、。基本语法：

1. 列表项1
2. 列表项2
3. 列表项3
……

6.2有序列表语法说明：（1）在HTML文件中，可以利用成对的

标记来插入有序列表，其中间的列表项标记

用来定义列表项顺序。（2）有序列表标记的type属性也应该用CSS的list-style来代替，用户可以指定出现在列表项前的项目编号的样式，其取值以及相对应的编号样式如下：decimal：指定项目编号为阿拉伯数字（默认值是decimal）；lower-alpha：指定项目编号为小写英文字母

5、；upper-alpha：指定项目编号为大写英文字母；lower-roman：指定项目编号为小写罗马数字；upper-roman：指定项目编号为大写罗马数字；none：无编号。6.2有序列表6.2有序列表6.2.2编号起始值通常，在指定列表的编号样式后，浏览器会从“1”、“a”、“A”、“i”或“I”开始自动编号。而在使用有序列表标记的start属性后，用户则可改变编号的起始值。start属性值是一个整数，表示从哪一个数字或字母开始编号。例如，设置start="3"，则有序列表的列表项编号将从“3”、“c”、“C”、“ⅲ”或“Ⅲ”开

6、始编号。6.2有序列表6.2有序列表6.2.3列表项样式除了对列表标记

进行属性设置外，我们还可以对列表项标记

进行属性设置。列表项标记

的type属性也请使用CSS来代替，用户可以指定单个列表项的符号（对于无序列表而言）或编号（对于有序列表而言）。在列表标记

的list-style和列表项标记

的list-style发生冲突的情况下，所指定的单个列表项遵循

的list-style进行显示。6.2有序列表注意：所指定的单个列表项只有样式发

7、生了变化，其顺序值大小不变。6.2有序列表6.2.4列表项编号列表项标记的list-style只能改变列表项的符号或编号的样式，并不会改变其值的大小。而使用列表项标记

的value属性，可以改变当前列表项的编号大小，并会影响其后所有列表项的编号大小。但该属性只适用于有序列表。6.2有序列表6.3嵌套列表列表还可以嵌套使用，也就是一个列表中还可以包含有多层子表。在网页文件中，对于内容层次较多的情况，使用嵌套列表不仅使网页的内容布局更加合理美观，而且使其内容看起来更加清晰、明了。嵌套的列表可以是无序列表的嵌套，也可以是有

8、序列表的嵌套，还可以是无序列表和有序列表的混合嵌套。6.4嵌套列表6.4定义列表在HTML文件中，只要在适当的地方插入

标记，即可自动生成定义列表（DefinitionList）。它的每一项前既没有项目符号，也没有编号