任务四_DIV与项目列表.ppt.pptVIP

任务流程 HTML提供了项目列表的基本功能。引入CSS后，项目列表被赋予了很多新的功能，超越了最初设计它时的预计。项目列表主要采用ul和ol标记，以及在li标记中定义列表中的各项。 在DIV+CSS布局中，通常使用项目列表进行导航栏的设计。通过控制ul、li和a等标记的属性，来实现多变的导航效果。也可使用项目列表来灵活设置形式多样的布局格式。 任务流程 如图所示，网页中的水平导航菜单、左侧的垂直导航以及右侧的品牌图标都是使用DIV+项目列表构成的。 任务流程 1、制作水平菜单 任务流程 2、制作垂直菜单 任务流程 3、制作图像列表 电子商务网页制作 DIV与项目列表 学习目标 知识目标： 能理解在DIV中使用项目列表的含义以及典型应用。 能力目标： 能掌握在DIV中建立列表的方法和典型应用。 一、DIV与项目列表 二、在使用DIV和项目列表制作网页导航 二、在使用DIV和项目列表制作网页导航 在网页中插入一个DIV（如menu1），并设置其CSS规则。 在此DIV中插入一个列表，设置此列表ul、li的CSS规则。 设置此列表超链接a、a:hover的CSS规则。 显示方式为：“块” 二、在使用DIV和项目列表制作网页导航 在网页中插入一个DIV（如menu1），并设置其CSS规则。 在此DIV中插入一个列表。 设置此列表超链接a、a:hover的CSS规则。 建立列表规则，并应用于ul。 建立此列表中列表项li的CSS规则。 显示方式为：“块” 二、在使用DIV和项目列表制作网页导航 插入图像并输入文字说明，设置为项目列表。 建立此列表ul、li的CSS规则。 设置此列表超链接a、a:hover的CSS规则。 显示方式为：“块” 课后练习 1．单项选择 　　⑴CSS中，定义ID选择符，其名称前要有指示符（ ）。 A）* B）. C）! D）# 　　⑵定义列表的项目符号为“无”，下列正确的是（ ）。 　　A）list-type: square B）type: 0 C）list-style-type:0 D）list-style-type: none