Web前端技术项目式教程电子教案 第3章 使用DIV+CSS实现中国传统文化网站首页布局 任务三教案-3

PAGE2PAGE第3章使用DIV+CSS实现中国传统文化网站首页布局课程名称网页设计项目名称使用DIV+CSS实现中国传统文化网站首页布局任务名称使用DIV+CSS实现中国传统文化网站首页布局课时2项目性质□演示性□验证性□设计性√综合性授课班级授课日期授课地点教学目标能力目标：1.掌握使用CSS选择器获取网页元素。2.掌握使用CSS的盒模型、区块、浮动、定位等设计网页布局。知识目标：1.熟悉CSS的基本语法规则。2.熟悉盒模型的基本原理。3.了解CSS的层叠和继承。素质目标：1.培养学生对中华优秀传统文化的深刻理解和认同。2.培养学生良好的职业道德，根据《中华人民共和国网络安全法》制作和发布网页信息。教学内容1.任务描述2.任务展示与实现（1）利用CSS盒模型和CSS样式定位网页（2）利用CSS定位机制精确控制网页元素位置（3）学生动手操作3.教师讲解本任务涉及的知识点教学重点1.CSS盒模型2.CSS定位机制教学难点1.CSS盒模型2.CSS定位机制教学准备1.装有VScode的电脑2.教学课件PPT3.教材：《Web前端技术项目式教程（HTML5+CSS3+Flex+Bootstrap）》作业设计1．综合运用CSS盒模型和CSS定位机制精确定位网页教学过程教学内容与过程（教学内容、教学方法、组织形式、教学手段）做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。【课前说明】介绍综合使用CSS盒子模型、CSS浮动定位，CSS相对定位，CSS绝对定位综合实现云景旅游公司首页布局。【目的】使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习知识的要求和目标。1、.新建CSS样式表文件并应用到网页中在站点根目录的styles文件夹下新建base.css、head.css、footer.css和index.css。其中base.css是网页全局性的基础样式文件，head.css是网页头部的样式表文件，footer.css是网页页脚部分的样式表文件。因为网站中所有网页的基础样式文件、头部和页脚部分是相同的，为了后期维护的方便，可以将这3个部分的样式表文件独立出来，应用到所有网页中去。reset.css的作用是让各个浏览器的CSS样式有一个统一的基准，而这个基准更多的就是“清零”。这个文件可以被任何网页直接引用。2、基础样式设置打开base.css，首先设置网页正文文字样式，然后去除所有超链接的下划线，最后设置清除浮动样式，3、头部布局与定位打开header.css，首先设置头部区域的宽度和居中对齐效果，然后实现Logo和导航栏的并列排列，4、主体内容.main_top区域布局与定位首先设置区域的总体样式，仍然设置其与头部区域保持相同的宽度和居中对齐效果。然后设置.top_left与它右边图片的左右排列效果。5.主体内容.main_middle区域布局与定位6.主体内容.main_bottom区域布局与定位7.页脚区域布局与定位1、基础样式设置打开base.css，首先设置网页正文文字样式，然后去除所有超链接的下划线，最后设置清除浮动样式，CSS代码如下。body{ font-size:14px;/*设置文字大小为14像素*/ font-family:"微软雅黑";/*设置文字字体为＂微软雅黑＂*/}a{ text-decoration:none;/*超链接下划线*/}.clear{ clear:both;/*清除左右浮动*/}2、头部布局与定位打开header.css，首先设置头部区域的宽度和居中对齐效果，然后实现Logo和导航栏的并列排列，CSS代码如下。header{ width:1160px; margin:0auto;/*实现块级元素居中对齐*/}.logo{ float:left;/*设置Logo区域左浮动*/}nav{ float:left;/*设置导航区域左浮动*/ margin-left:25px;/*定义logo和导航栏之间的间距*/}3、主体内容.main_top区域布局与定位首先设置区域的总体样式，仍然设置其与头部区域保持相同的宽度和居中对齐效果。然后设置.top_left与它右边图片的左右排列效果。在index.css中输入以下CSS代码。.main_top{ width:1160px; margin:50pxauto0;/*设置其与banner之间的留白为50像素*/}.main_top.top_left{ float:left; width:48%;}.main_topimg{ float:right; width:48%;}.main_top.top_lefth2{/*设置标题与正文之间的间距*/ margin-bottom:30px;}应用base.css中的下面样式后，效果如图3-19所示。.clear{ clear:both;}最后设置.bottom区域的样式，效果如图3-20所示。.bottom{ margin-top:50px;}.bottomdiv{ float:left; width:30%; margin-right:3%;}根据上面的经验，想让.main_middle的内容回归它的正常位置，仍然需要清除浮动。在HTML的.bottom后面加上清除浮动的空标签。<divclass="bottom"> 中间代码省略</div><divclass="clear"></div>4、主体内容.main_middle区域布局与定位/*main_middle区域样式*/.jingqu{ width:1160px; margin:60pxauto;}.transbox{ float:left; width:30%;}.jingqu_img{ float:right; width:70%;}.jingqu_imgli{ float:left; width:31%; margin:01%;}.jingqu_imgimg{ max-width:100%;/*弹性图片*/}5、主体内容.main_bottom区域布局与定位/*main_bottom区域样式*/.main_bottomdiv{ width:1160px; margin:0auto;}.main_bottomdivdiv{ float:left; width:49%;}6、页脚区域布局与定位打开footer.css，设置页脚信息区域的宽度和居中对齐效果，然后通过浮动让“回到顶部”的超链接右对齐，CSS代码如下。footer{ width:1160px; margin:70pxauto50px;}footerdivspan{ float:right;}通过学习，学生能够掌握CSS盒子模型、CSS定位机制，以及如何使用CSS盒子模型和定位机制精确定位网页。本节课主要运用案例教学法，通过对CSS盒子模型的深入理解，掌握使用C