HTML5+CSS3网页设计与制作课件：制作响应式网页.pptx

制作响应式网页

能表述响应式网页设计的相关概念；能说明CSS媒体查询在响应式网页设计中的作用；能够正确使用CSS媒体查询等完成D清单页面页面响应式导航菜单制作。任务目标制作响应式导航菜单

将D清单页面设置为响应式网页，当用户使用平板设备或电脑设备时，对导航栏中的列表标签进行样式设置和排版，使导航栏的列表内容全部显示在页面顶部。效果如下：任务描述任务1配置工作环境图1-19平板和电脑端导航条效果图

本次任务要求根据D清单页面效果图，使用CSS样式，在基础上将D清单页面菜单修改为响应式菜单，需要：学习响应式页面的相关概念特征；CSS媒体查询的相关知识综合运用媒体查询和CSS相关知识，对D清单页面菜单栏进行响应式改造，使其在手机端、平板端和电脑端（根据效果图，平板和电脑端效果一致）的菜单栏显示不同状态。任务分析图1-19平板和电脑端导航条效果图制作响应式导航菜单

知识与技能准备响应式网页设计就是网页的设计与开发能够根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。即无论用户正在使用笔记本、ipad、手机，我们的页面都能够自动切换分辨率、图片尺寸等，以适应不同设备。实现响应式设计的主要途径是使用CSS媒体查询。1、认识响应式网页设计

知识与技能准备CSS媒体查询可以根据不同的屏幕尺寸设置不同的样式。当我们重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。2、CSS媒体查询语法：@mediamediatypeand|not|only(mediafeature){CSS-Code;}

知识与技能准备其中，mediatype即媒体类型有以下几种：2、CSS媒体查询表1-19-1媒体类型

知识与技能准备Mediafeature即媒体功能有以下取值：2、CSS媒体查询表1-19-2媒体功能

课堂练习1-19-1CSS媒体查询简单应用HTML代码：1divclass=textsometext/divCSS代码：12345678910111213.text{ color:grey;}@mediascreenand(max-width:960px){.text{ color:red;}}@mediascreenand(max-width:768px){.text{ color:orange;}}@mediascreenand(max-width:550px){.text{ color:yellow;}}@mediascreenand(max-width:320px){.text{ color:green;}}

课堂练习1-19-1CSS媒体查询简单应用在火狐浏览器的响应式设计模式下调整浏览器视口宽度，可以看到在不同分辨率下，文字的颜色有所变化。图1-19-5768px下文字颜色效果（橘黄色）图1-19-5768px下文字颜色效果（橘黄色）图1-19-7320px下文字颜色效果（绿色）

知识与技能准备这些变化，正是媒体查询所要的效果。媒体查询就是通过不同的媒体类型和条件定义样式表规则。媒体查询的实现方法很多，这里只介绍W3C推荐的媒体查询CSS样式规则。也可以通过下列两种写法来实现媒体查询：或另外，在使用media时候需要先设置下面这段代码，来兼容移动设备的展示效果：其中width=device-width为宽度等于当前设备的宽度，initial-scale为初始的缩放比例（默认设置为1.0）。2、CSS媒体查询@importurl(example.css)screenand(width:800px);linkmedia=screenand(width:800px)rel=stylesheethref=example.css/meta?name=viewport?content=width=device-width,?initial-scale=1.0

任务实施在上一任务完成代码的基础上，更改D清单网页头部的导航栏部分，让导航栏的列表内容显示在页面顶部。注意，本任务中，因为设置了变换和过渡效果，所以其元素的显示和隐藏并不完全是依赖display的方式来实现，而是通过opacity属性修改透明度来实现。参考代码请参照书本。

二级导航菜单即指当鼠标放到一级导航菜单上后，会弹出相应的二级导航菜单，移去鼠标后消失。我们可以通过给一级导航菜单加一个hover，滑过时二级导航菜单显示，鼠标移走后隐藏二级导航菜单。任务拓展制作响应式导航菜单

能叙述网页栅格系统的布局原理，栅格系统的设计原则；能编写固定宽度和弹性页面栅格系统的CSS布局代码；能将栅格系统和媒体查询