Web前端技术项目式教程(HTML5CSS3FlexBootstrap)教案-使用Flex实现网页响应式布局

1、第8章使用FleX实现网页响应式布局课程名称Web前端开发项目名称使用Flex布局实现 网页响应式布局任务名称使用Flex布局实现网页响应式布局课时6项目性质演示性验证性设计性综合性授课班级授课日期授课地点教学目标能力目标：1. 具备应用Flex实现响应式布局的能力2. 具备灵活运用Flex的能力 知识目标：1. 掌握响应式布局的基础知识2. 掌握Flex布局的基本语法3. 掌握运用Flex布局实现各种响应式布局的方法 素质目标：1. 培养学生信息搜集能力2. 培养学生团结合作、互帮互助的能力教学内容1. 任务描述2. 任务展示与实现（1）创建响应式布局的基本结构（2） 实现云景旅游公司首页F

2、lex布局（2）学生动手操作3. 教师讲解本任务涉及的知识点4. 任务小结教学重点1. 响应式布局基础知识2. Flex实现响应式网页教学难点1. Flex 基本语法2. Flex实现响应式网页教学准备1. 装有SUbIime或者HbUilder 的电脑2. 教学课件PPT3. 教材：Web前端技术项目式教程作业设计使用Flex实现游公司二级页面“公司概况”的响应式效果。教学过程教学环节教学内容与过程（教学内容、教学方法、组织形式、教学手段）课前组织做好课前“ 5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打 开课件、打开软件、打开 U盘中的素材位置、打开授课计划、教

3、案等），吸引学生注意力。课程说明【课前说明】分别从响应式布局基础知识、FleX语法基础，掌握响应式网页的实现方法。【目的】使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目 标。掌握Flex布局的基础，掌握使用 Flex实现响应式网页的方法。课程内容描述一、响应式布局基础无论使用Flex布局还是Bootstrap框架实现响应式网页，都必须首先掌握响应式布局的基础知识，主要包括：VieWPOrt设置、百分比宽度布局、相对大小子体、弹性图片、媒体查询，下面逐一进行介绍。二、Flex布局采用Flex布局的元素，简称“容器”。它的所有子元素自动成为容器成员，简称“项目”

4、。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）为main Start ,结束位置为 main end ;交叉轴的开始位置为 cross start，结束位置为crossend。项目默认沿主轴排列。单个项目占据的主轴空间为main SiZe ,占据的交叉轴空间为cross SiZeO（1）容器的属性Flex布局的语法一共包含12个属性，其中，6个设置在容器上，6个设置在项目上。下面先介绍设置在容器上的属性：flex -direction属性、flex -WraP属性、flex -flow 属性、justify -CO

5、ntent属性、align -items 属性、align-content 属性。（2）项目的属性另外6个属性设置在项目上：Order属性、flex-grow属性、flex-shrink属性、flex-basis属性、flex属性、align-self属性。课堂冋步训练：使用FleX实现云景旅游公司首页响应式布局实训1.实现首页头部响应式效果手机端页面最终的显示效果是：Logo、导航、导航项、搜索表单全部居中。厶I景旅游手机端页面头部Flex代码1.ogo2display: flex;3justify-c Ontent: Cen ter;45nav ul li6display: flex;7j

6、ustify-c Ontent: Cen ter;89.n avbar form 10display: flex;1112.n avbar in PUt 13flex-grow: 1;14B厶:景旅游PAD端页面头部Flex代码1media(mi n-width:768px)2nav ul3display: flex;45n av6display: flex;7JUStify-C Ontent: Cen ter;89I厶I景旅游桌面端页面头部Flex代码1media(mi n-width:992px)2header3display: flex;45.n avbar6display: flex;

7、7flex: 1;8 justify-c Ontent: SPaCe-betwee n;9 10 .n avbar in put11 flex-grow: 0;/12 13 2. 主体内容.main_top区域实现.top区域Flex代码1 .top2 display: flex;3 4 .top_left5 flex: 1;6 display: flex;7 alig n-items: Cen ter;8 9 .top_right10 flex: 1;11 .bottom区域FleX代码1 .bottom2 display: flex;3 4 .col5 flex: 1;6 3. 主体内容.

8、main_middle 区域实现.main_middle区域包含两个.jingqu部分，两部分代码相同，此处只列举其中一个部分代码。.jingqu区域Flex代码1 .jin gqu2 display: flex;3 4 .ji ngqu .tra nsbox5 flex: 2;6 7 .jin gqu_img8flex: 5;910.ji ngqu_img ul11display: flex;12flex-wrap: wrap;134.主体内容.main_bottom 区域实现下面详细介绍实现这个区域布局效果的Flex代码。.main_bottom 区域 FleX 代码1.ma in _bo

9、ttom2display: flex;3alig n-items: Cen ter;45.ma in _bottom>div6display: flex;78.main_bottom div div9flex: 1;10 Flex实现水平居中和垂直居中1.main_bottom div div:first-child p2display: flex;3align-items: Ce nter;4justify-c Ontent: Cen ter;55.实现页脚效果下面介绍实现网页页脚效果的Flex代码。Flex实现页脚导航水平排列footer uldisplay: flex;Flex实现页脚信息两端对齐1footer div p2display: flex;3justify-c Ontent: SPaCe-betwee n;4总结评价通过学习，学生能够掌握响应式布局的基本原理方法，掌握使用FleX实现响应式布局的基本方法。本节课主要运用案例教学法，通过使用Fle