1.19制作响应式导航（课件）-高二《网页设计与制作》同步教学（劳动版）

制作响应式网页 第三阶段 能表述响应式网页设计的相关概念； 能说明CSS媒体查询在响应式网页设计中的作用； 能够正确使用CSS媒体查询等完成D清单页面页面响应式导航菜单制作。 任务目标 任务19 制作响应式导航菜单 将D清单页面设置为响应式网页，当用户使用平板设备或电脑设备时，对导航栏中的列表标签进行样式设置和排版，使导航栏的列表内容全部显示在页面顶部。 效果如下： 任务描述 任务1 配置工作环境 图1-19平板和电脑端导航条效果图 本次任务要求根据D清单页面效果图，使用CSS样式，在任务18基础上将D清单页面菜单修改为响应式菜单，需要： 学习响应式页面的相关概念特征； CSS媒体查询的相关知识 综合运用媒体查询和CSS相关知识，对D清单页面菜单栏进行响应式改造，使其在手机端、平板端和电脑端（根据效果图，平板和电脑端效果一致）的菜单栏显示不同状态。 任务分析 图1-19平板和电脑端导航条效果图 任务19 制作响应式导航菜单 知识与技能准备 响应式网页设计就是网页的设计与开发能够根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。即无论用户正在使用笔记本、ipad、手机，我们的页面都能够自动切换分辨率、图片尺寸等，以适应不同设备。 实现响应式设计的主要途径是使用CSS媒体查询。 1、认识响应式网页设计 知识与技能准备 CSS媒体查询可以根据不同的屏幕尺寸设置不同的样式。当我们重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。 2、CSS媒体查询 语法： @media mediatype and|not|only (media feature) { CSS-Code; } 知识与技能准备 其中，mediatype即媒体类型有以下几种： 2、CSS媒体查询 表1-19-1 媒体类型 知识与技能准备 Media feature即媒体功能有以下取值： 2、CSS媒体查询 表1-19-2 媒体功能 课堂练习1-19-1 CSS媒体查询简单应用 HTML代码： 1 <div class="text">some text</div> CSS代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 .text { color: grey;} @media screen and (max-width: 960px) { .text { color: red;} } @media screen and (max-width: 768px) { .text { color: orange;} } @media screen and (max-width: 550px) { .text { color: yellow;} } @media screen and (max-width: 320px) { .text { color: green;} } 课堂练习1-19-1 CSS媒体查询简单应用 在火狐浏览器的响应式设计模式下调整浏览器视口宽度，可以看到在不同分辨率下，文字的颜色有所变化。 图1-19-5 768px下文字颜色效果（橘黄色） 图1-19-5 768px下文字颜色效果（橘黄色） 图1-19-7 320px下文字颜色效果（绿色） 知识与技能准备 这些变化，正是媒体查询所要的效果。媒体查询就是通过不同的媒体类型和条件定义样式表规则。媒体查询的实现方法很多，这里只介绍W3C推荐的媒体查询CSS样式规则。 也可以通过下列两种写法来实现媒体查询： 或 另外，在使用media时候需要先设置下面这段代码，来兼容移动设备的展示效果： 其中width=device-width为宽度等于当前设备的宽度，initial-scale为初始的缩放比例（默认设置为1.0）。 2、CSS媒体查询 @import url(example.css) screen and (width:800px); <link media="screen and (width:800px)" rel="stylesheet" href="example.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0> 任务实施 在上一任务完成代码的基础上，更改D清单网页头部的导航栏部分，让导航栏的列表内容显示在页面顶部。 注意，本任务中，因为设置了变换和过渡效果，所以其元素的显示和隐藏并不完全是依赖display的方式来实现，而是通过opacity属性修改透明度来实现。参考代码请参照书本。 二级导航菜单即指当鼠标放到一级导航菜单上后，会弹出相应的二级导航菜单，移去鼠标后消失。我们