1、主要内容重点掌握列表的嵌套 掌握定义列表 了解菜单列表和目录列表 4.1 列表简介列表简介 l列表（List）在制作网页时，列表经常被用到写提纲和品种 说明书。通过列表标记的使用能使这些内容在 网页中条理清晰、层次分明、格式美观的表现出来。在网页中将相关资料以条目的形 式有序或者无序排列而形成的表。常用的列表有无序列表、有序列表定义列表三种。另外，还有不太常用的目录列表和菜单列表。4.1 列表简介列表简介表4-1 列表类型及其标记符号列表类型标记符号无序列表ul有序列表ol定义列表dl目录列表dir菜单列表menu4.2 无序列表l无序列表（Unordered List）是一个没有特定顺序的相关条目（也称为列表 项）的集合。在无序列表中，各个列表项之间属并列关系，没有先后顺序之分，它们之间以一个项目符号 来标记。4.2 无序列表l基本语法：项目名称项目名称 项目名称项目名称 项目名称项目名称 4.2 无序列表l 语法说明：在HTML文件中，可以利用成对的标记来插 入无序列表，其中间的列表项标签（list-items）用来定义列表项序列。使用无序列表标签的TYPE属性，用户可以指定出现在

2、列 表项前的项目符号的样式，其取值以及相对应的符号样 式如下：disc：指定项目符号为一个实心圆点（IE浏览器的默认值是disc）。circle：指定项目符号为一个空心圆点。square：指定项目符号为一个实心方块。4.2 无序列表l示例代码（代码位置4-1.html）无序列表无序列表 班级新闻班级新闻 最新课程表最新课程表 关于普通话考试的通知关于普通话考试的通知 钢琴名曲音乐欣赏钢琴名曲音乐欣赏-献给爱丽丝献给爱丽丝 中国奥运屈辱史中国奥运屈辱史 div+css高级应用学习高级应用学习 4.2 无序列表l实例代码4-1.html的执行效果如图4-1所示。4.3 有序列表l有序列表（Ordered List）有序列表（Ordered List）是一个有特定顺序的相关条 目（也成为列表项）的集合。在有序列表中，各个列表项有先后顺序之分，它们之间以编号来标记。4.3.1 有序列表及其编号样式4.2 无序列表l基本语法：项目名称项目名称 项目名称项目名称 项目名称项目名称 4.3.1 有序列表及其编号样式l 语法说明：在HTML文件中，可以利用成对的标记来插入有序列表，其中间的列表项标记用

3、来定义列表项顺序。使用有序列表标记的type属性，用户可以指定出现在列表项前的项目编号的样式，其取值以及相对应的编号样式如下：“1”：指定项目编号为阿拉伯数字（IE浏览器的默认值是disc）；“a”：指定项目编号为小写英文字母；“A”：指定项目编号为大写英文字母；“i”：指定项目编号为小写罗马数字；“I”：指定项目编号为大写罗马数字。4.3.1 有序列表及其编号样式l示例代码有序列表有序列表 报名报名 报名时间：报名时间：3月月1621 日，逾期不予受理。日，逾期不予受理。报名地点：所在院系办公室。报名地点：所在院系办公室。报名费用：按物价局规定报名费用：按物价局规定85元元/人人/次（含培训费用），报名时交齐。次（含培训费用），报名时交齐。提交资料及注意事项：提交资料及注意事项：4.3.1 有序列表及其编号样式l程序4-2的执行效果如图4-2所示。改变程序中type属性的值后，列表项前的项目编号将按指定的样式显示。4.3.2 编号起始值l 通常，在指定列表的编号样式后，浏览器会从“1”、“a”、“A”、“i”或“I”开始自动编号。l而在使用有序列表标记的start属性后，用户则可改变

4、编号的起始值。lstart属性值是一个整数，表示从哪一个数字或字母开始编号。l例如，设置start=3，则有序列表的列表项编号将从“3”、“c”、“C”、“”或“”开始编号。4.3.2 编号起始值l示例代码编号起始值的指定编号起始值的指定 报名报名 报名时间：报名时间：3月月1621 日，逾期不予受理。日，逾期不予受理。报名地点：所在院系办公室。报名地点：所在院系办公室。报名费用：按物价局规定报名费用：按物价局规定85元元/人人/次（含培训费用），报名时次（含培训费用），报名时 交齐。交齐。提交资料及注意事项：提交资料及注意事项：4.3.2 编号起始值l程序4-3的执行效果如图4-3所示。此时，尽管列表类型type=A，start的值仍需取阿拉伯数字3，而不能取大写英文字母C。4.3.3 列表项样式l除了对列表标记进行属性设置外，我们还可以对列表项标记进行属性设置。使用列表项标记的type属性，用户可以指定单个列表项的符号（对于无序列表而言）或编号（对于有序列表而言）。在列表标记的type属性和列表项标记的type属性发生冲突的情况下，所指定的单个列表项遵循的type属性进行显示。4.

5、3.3 列表项样式l示例代码程序4-4在程序4-2的基础上指定了第二个列表项的样式。报名报名 报名时间：报名时间：3月月1621 日，逾期不予受理。日，逾期不予受理。报名地点：所在院系办公室。报名地点：所在院系办公室。报名费用：按物价局规定报名费用：按物价局规定85元元/人人/次（含培训费次（含培训费 用），报名时交齐。用），报名时交齐。提交资料及注意事项：提交资料及注意事项：4.3.3 列表项样式l程序4-4的执行效果如图4-4所示。第二个列表项的样式变为阿拉伯数字“2”。4.3.3 列表项样式l所指定的单个列表项只有样式发生了变化，其顺序值大小不变。列表项标记的type属性只影响当前列表项，后续的列表项标记将恢复遵循列表中设置的type属性。列表项标记type属性的指定，即使用于无序列表也使用于有序列表。此处，不再针对无序列表举例。4.3.4 列表项编号l列表项标记的type属性只能改变当前列表项的符号或编号的样式，并不会改变其值的大小。而使用列表项标记的value属性，可以改变当前列表项的编号大小，并会影响其后所有列表项的编号大小。但该属性只适用于有序列表。4.3.4 列表项编号

6、l示例代码和程序4-3类似，此时尽管列表类型type=A，value的值仍需取阿拉伯数字5，而不能取大写英文字母E。报名时间：报名时间：3月月1621 日，逾期不予受理。日，逾期不予受理。报名地点：所在院系办公室。报名地点：所在院系办公室。报名费用：按物价局规定报名费用：按物价局规定85元元/人人/次（含培训费次（含培训费 用），报名时交齐。用），报名时交齐。提交资料及注意事项：提交资料及注意事项：4.3.4 列表项编号l程序4-5的执行效果如图4-5所示。第二个列表项以后从字母“E”开始编号。4.4嵌套列表l列表还可以嵌套使用，也就是一个列表中还可以包含有多层子列表。在网页文件中，对于内容层次较多的情况，使用嵌套列表不仅使网页的内容布局更加合理美观，而且使其内容看起来更加清晰、明了。嵌套的列表可以是无序列表的嵌套，也可以是有序列表的嵌套，还可以是无序列表和有序列表的混合嵌套。4.4嵌套列表l程序4-6是嵌套列表的一个简单实例，该实例中实现了有序列表的嵌套。报名报名报名时间：报名时间：3月月1621 日，逾期不予受理。日，逾期不予受理。报名地点：所在院系办公室。报名地点：所在院系办公室

7、。报名费用：按物价局规定报名费用：按物价局规定85元元/人人/次（含培训费用），报名时交齐。次（含培训费用），报名时交齐。提交资料及注意事项：提交资料及注意事项：参加测试的学生须填写参加测试的学生须填写河南省普通话水平测试报名表河南省普通话水平测试报名表一份（准考证号码不用填写）；一份（准考证号码不用填写）；填写准考证一份（编号不用填写），所填姓名和出生年月等须与身份证一致；填写准考证一份（编号不用填写），所填姓名和出生年月等须与身份证一致；提交小一寸彩色证件照提交小一寸彩色证件照3张（照片不能是打印版、不能是生活照，张（照片不能是打印版、不能是生活照，3张照片必须统一底片），其中两张照片必须统一底片），其中两张照片贴在报名表和准考证上，另一张用钢笔在背面写上校名、系别和姓名，与表格一起上交。张照片贴在报名表和准考证上，另一张用钢笔在背面写上校名、系别和姓名，与表格一起上交。培训培训测试测试（注：具体时间和地点按河南财经学院测试站发回的准考证上所列。）（注：具体时间和地点按河南财经学院测试站发回的准考证上所列。）4.4嵌套列表l程序4-6的执行效果如图所示。在嵌套列表中也可以根据需要更

8、改某层列表或某层单个列表项的符号（或编号）的样式或其值的大小。4.5定义列表l定义列表（Definition List）在HTML文件中，只要在适当的地方插入标记，即可自动生成定义列表（Definition List）。它的每一项前既没有项目符号，也没有编号，它是通过缩进的形式使内容层次清晰。4.5定义列表l基本语法：4.5定义列表l 语法说明：-标记用来创建定义列表；-：dt标记（definition term）是用来创建列表中的每个元素标题，此标记只能在标记中使用。显示时标记定义的内容将左对齐；-：dd标记（definition description）用来创建列表元素的内容描述，此标记也只能在标记中使用。显示时标记定义的内容将相对于标记定义的内容向右缩进。4.5定义列表l示例代码 报名报名 报名时间：报名时间：3月月1621 日，逾期不予受理。日，逾期不予受理。报名地点：所在院系办公室。报名地点：所在院系办公室。报名费用：按物价局规定报名费用：按物价局规定85元元/人人/次（含培训费用），报名次（含培训费用），报名 时交齐。时交齐。提交资料及注意事项：提交资料及注意事项：培训培训

9、 培训时间：培训时间：3月月31日（星期六）。日（星期六）。培训地点：河南财经学院培训地点：河南财经学院4号楼号楼503教室（如有变动，以通知教室（如有变动，以通知 为准）。为准）。注意事项：报考同学请自带注意事项：报考同学请自带普通话水平测试指导普通话水平测试指导用书用书 （新版），可到学而优等书店购买。（新版），可到学而优等书店购买。4.5定义列表l程序4-7用标记定义了上层项目“报名”和“培训”，并用标记分别定义了其相应的下层项目，他们之间以缩进的形式使层次清晰。程序4-7的执行效果如图4-7所示。4.6菜单列表和目录列表l菜单列表（Menu List）通常用于显示一个简单的单列列表，一般不做嵌套。目录列表（Directory List）通常用于显示一个多列的文件列表，可做嵌套。他们的使用均和无序列表类似，并且可以看着是无序列表的一种特殊形式。一般不建议使用此两项列表。4.6菜单列表和目录列表l基本语法：项目名称项目名称 项目名称项目名称 项目名称项目名称 项目名称项目名称 项目名称项目名称 项目名称项目名称 4.6菜单列表和目录列表l示例代码班级新闻班级新闻 最新课程表最新课程

10、表 关于普通话考试的通知关于普通话考试的通知 钢琴名曲音乐欣赏钢琴名曲音乐欣赏-献给爱丽丝献给爱丽丝 中国奥运屈辱史中国奥运屈辱史 div+css高级应用学习高级应用学习普通话考试报名通知普通话考试报名通知4.6菜单列表和目录列表l示例代码 报名时间：报名时间：3月月1621 日，逾期不予受理。日，逾期不予受理。报名地点：所在院系办公室。报名地点：所在院系办公室。报名费用：按物价局规定报名费用：按物价局规定85元元/人人/次（含培训费用），报名时交齐。次（含培训费用），报名时交齐。提交资料及注意事项：提交资料及注意事项：参加测试的学生须填写参加测试的学生须填写河南省普通话水平测试报名表河南省普通话水平测试报名表一份（准考一份（准考 证号码不用填写）；证号码不用填写）；达芬奇密码达芬奇密码 填写准考证一份（编号不用填写），所填姓名和出生年月等须与身份填写准考证一份（编号不用填写），所填姓名和出生年月等须与身份 证一致；证一致；提交小一寸彩色证件照提交小一寸彩色证件照3张（照片不能是打印版、不能是生活照，张（照片不能是打印版、不能是生活照，3张张 照片必须统一底片），其中两张照片贴在报名表

《网页设计与开发实验课件第4章 列表.ppt》由会员m****u分享，可在线阅读，更多相关《网页设计与开发实验课件第4章 列表.ppt》请在八斗文库上搜索。