项目一 第一阶段 任务4 添加菜单栏列表-【鹑首文化】HTML5+CSS3网页设计与制作配套电子课件PPT

HTML5+CSS3网页设计与制作 使用HTML5+CSS3制作响应式网页 项目一 项目将通过“制作一个D清单网页广告单页”项目，即通过制作一个HTML页面来承载网页制作知识，完成网页开发环境搭建、HTML5标签、CSS3叠层样式和响应式布局等的学习。 项目目标 D清单是某公司推出的一款跨平台同步的待办事项和任务提醒软件, 旨在协助您完成待办事务比如生日提醒, 旅行安排, 会议准备等以便更好的进行时间和事项管理。 为了方便D清单应用的推广，其公司需要制作一个该应用产品的介绍网页。该页面主要用于手机端进行分享推广，同时也要求能够在电脑端进行访问。 前端工程师小王所在的科技公司已经拿到了设计稿，如图1所示。主管希望他担任本次项目的前端工作，开发完成后将成果交付给程序员完成逻辑制作、测试和发布。 项目情境 图1-1-1 项目移动端和电脑端页面截图 网页制作的一般流程如下： 项目分析 项目发布 需求分析 规划设计 实施 测试 交付 根据“移动优先”原则，我们需要制定项目完成的计划： 项目分析 时间段1 时间段2 时间段3 时间段4 时间段5 分析规划 实施 阶段1 移动端内容制作 阶段2 移动端格式制作 阶段3 响应式制作 测试与交付 D清单前端开发甘特图 时间 进度 任务 制作网页内容 第一阶段 本次任务要求根据D清单网页效果图的菜单栏内容，本任务需在任务3的基础上使用HTML列表添加菜单栏的内容（不考虑格式）。完成后的网页菜单栏效果图如图1-4所示。 任务描述 任务4 添加菜单栏列表 图1-4 添加网页菜单栏列表内容后的菜单栏效果图 要完成D清单网页菜单栏列表内容的制作，需要： 学习HTML列表的结构组成、无序列表及有序列表的语法； 分析D清单页面中的列表内容，正确选择及使用列表标签完成D清单网页中的列表制作。 任务分析 图1-4-1 D清单菜单栏展开后的网页效果图 任务4 添加菜单栏列表 知识与技能准备 HTML的列表元素是一个由列表标签封闭的结构，包含的列表项由<li></li>组成。 1、列表的结构组成 列表在网页中占有比较大的比重，如信息分类、新闻列表、菜单、排行榜等，列表形式显示信息非常整齐直观，便于用户理解，列表项内部可以使用段落、换行符、图片、链接以及其他列表等。 HTML支持有序、无序和定义列表，常用列表结构有无序列表和有序列表。 知识与技能准备 无序列表就是列表结构中的列表项没有先后顺序的列表形式。无序列表适合列表项之间无级别顺序关系的情况，大部分网页应用中的列表均采用无序列表，其列表标签采用<ul></ul>，其语法形式如下： 1.1 无序列表<ul> <ul> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> </ul> 打开Visual Studio Code软件，在<body>标签中输入如下代码： 课堂练习1-4-1 无序列表的简单应用 1 2 3 4 5 <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> </ul> 显示效果如下： 课堂练习1-4-1 无序列表的简单应用 图1-4-2 无序列表的简单应用 知识与技能准备 有序列表就是列表结构中的列表项有先后顺序的列表形式，有序列表适合各项目之间存在顺序关系的情况。其列表标签采用<ol></ol>，其语法形式如下： 1.2 有序列表<ol> <ol> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> </ol> 打开Visual Studio Code软件，在<body>标签中输入如下代码： 课堂练习1-4-2 有序列表的简单应用 1 2 3 4 5 <ol> <li>HTML</li> <li>CSS</li> <li>JS</li> </ol> 显示效果如下： 课堂练习1-4-1 无序列表的简单应用 图1-4-3 有序列表的简单应用 知识与技能准备 当一个列表内容里还有细分的列表，就需要我们嵌套一个列表进去。语法结构与数学中的括号嵌套类似。 2、嵌套列表 打开Visual Studio Code软件，在<body>标签中输入如下代码： 课堂练习1-4-3 列表的嵌套使用 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <ol> <li>牛奶 <ol> <li>纯牛奶</li> <li>高钙奶</li> </ol> </li> <li>茶 <ol> <li>