资源简介

(共24张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的列表元素是一个由列表标签封闭的结构，包含的列表项由

• 列表项一


• 列表项二


• 列表项三



打开Visual Studio Code软件，在标签中输入如下代码：
课堂练习1-4-1 无序列表的简单应用
1 2 3 4 5


• HTML


• CSS


• JS



显示效果如下：
课堂练习1-4-1 无序列表的简单应用
图1-4-2 无序列表的简单应用
知识与技能准备
有序列表就是列表结构中的列表项有先后顺序的列表形式，有序列表适合各项目之间存在顺序关系的情况。其列表标签采用
，其语法形式如下：
1.2 有序列表




1. 列表项一


2. 列表项二


3. 列表项三



打开Visual Studio Code软件，在标签中输入如下代码：
课堂练习1-4-2 有序列表的简单应用
1 2 3 4 5


1. HTML


2. CSS


3. JS



显示效果如下：
课堂练习1-4-1 无序列表的简单应用
图1-4-3 有序列表的简单应用
知识与技能准备
当一个列表内容里还有细分的列表，就需要我们嵌套一个列表进去。语法结构与数学中的括号嵌套类似。
2、嵌套列表
打开Visual Studio Code软件，在标签中输入如下代码：
课堂练习1-4-3 列表的嵌套使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14


1. 牛奶
   
   
   
   1. 纯牛奶
   
   
   2. 高钙奶
   
   
   
   


2. 茶
   
   
   
   1. 红茶
   
   
   2. 绿茶
   
   
   
   



显示效果如下：
课堂练习1-4-3 列表的嵌套使用
图1-4-4 列表的嵌套使用
打开Visual Studio Code软件，在标签中输入如下代码：
课堂练习1-4-4 有序列表和无序列表的嵌套使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16


1. 网页前端技术
   
   
   
   1. HTML
   
   
   2. CSS
   
   
   3. JS
   
   
   
   


2. 网页后台的学习
   
   
   
   1. ASP
   
   
   2. PHP
   
   
   3. CGI
   
   
   
   



显示效果如下：
课堂练习1-4-4 有序列表和无序列表的嵌套使用
图1-4- 4 有序列表和无序列表的嵌套使用
任务实施
1、打开任务3中的index.html文件
2、分析后采用HTML无序列表完成网页菜单栏内容的制作，在之前的
网页结构标签中添加列表代码。参考代码如下：
1 2 3 4 5 6 7 8 9 10 11 12





HTML提供的常用列表结构除了无序列表和有序列表外，还有自定义列表

。
任务拓展
任务4 添加菜单栏列表

展开更多......

收起↑