HTML5 CSS3Web前端开发技术（任务式）（微课版）（于丽娜第2版） 教案09 《使用CSS3定位布局页面》

《》教案20-20学年第学期课程名称：授课教师：职称：开课部门：年月日

《》教案首页课程名称授课专业班级授课教师职称部门课程类型学位课□公共必修课□专业必修课□素质拓展必修课□公共选修课□专业选修课□素质拓展选修课非学位课□公共必修课专业必修课□素质拓展必修课□公共选修课□专业选修课□素质拓展选修课课程性质□理论□实践理论+实践考核方式考试□考查课程教学总学时数64学分3.5学情分析大*年级的学生首次正式接触WEB的相关概念，但是在之前的基础课程中学过***（操作系统、计算机原理、Python编程、C语言编程）等相关专业方面基础知识，具备有一定的计算机操作能力，与基础应用知识；并且在日常中大量使用电脑与手机等计算机设备，其中日常生活中也对于网页的使用更是颇多。但对于WEB方面的专业知识没有一个准确、完整的知识体系构建。教学方法谈论法、讲授法、演示法、练习法、抽象法教材名称《HTML5+CSS3Web前端开发技术》作者于丽娜出版社及出版时间人民邮电出版社2021.09参考书目作者出版社及出版时间教研室意见教研室主任签字：年月日注：表中□选项请打“√”。每门课程只需填写一次本表。

《》教案授课教师班级学时6授课日期教学任务《使用CSS3定位布局页面》授课方式讲授实践授课地点多媒体教室实验/实训室□企业主要参考资料教学PPT、微课、动画、思维导图课程思政视频习题等教学目标素质目标：1.培养学生团队合作精神；2.培养学生分析问题、解决问题的能力。知识目标：1.了解使用position四种定位方式的特点；2.理解z-index属性调整定位元素堆叠方式。能力目标：1.掌握常见元素重叠覆盖效果的实现；2.掌握页面固定定位实现功能按钮。教学内容四种定位方式四种定位方式的对比z-index重点难点教学重点：四种定位方式四种定位方式的对比z-index教学难点：四种定位方式教学方法谈论法、讲授法、演示法、练习法素材资源R文本素材R实物展示RPPT幻灯片□音频素材R视频素材R动画素材R图形/图像素材□网络资源□其他课后作业任务一：总结提升任务二：能力进阶教学反思注：教案按授课次数填写，每次授课均应填写一份本表。重复班授课可不另填写教案。 

教学过程及内容一、导入新课【约5分钟】教师：网页内容呈现的方式是平面的，但网页中要表达的内容并不一定也是平面的，大多情况下，我们需要通过一定的元素层叠覆盖，给浏览者营造出立体空间感或者层次感。我们将在项目首页的课程列表部分通过定位样式实现课程角标效果、实现页面头部粘性定位、实现固定位置的置顶按钮。通过讲解相对定位和绝对定位的应用，同学们要提高多角度分析问题，全方面看待问题的能力。二、新知识点、技能点讲解【约x分钟】新课讲解1：【约10分钟】教师：在CSS中有三种基本的布局机制，分别是标准流、浮动和定位。position属性与float属性一样都是CSS排版中非常重要的概念。position属性从字面义即是位置的设置，进行子元素在父元素内部的位置确定。......值说明static默认值，没有定位作用。relative相对定位，主要表示根据自身原位置进行位置偏移。absolute绝对定位，主要用来在具有定位属性的父元素中，根据父元素的边界距离来确定元素位置。fixed固定定位，类似于绝对定位，固定定位的定位参考依据为浏览器的可视区域。top距离量，配合relative、absolute、fixed进行定位。right同top属性。left同top属性。bottom同top属性。（案例演示）新课讲解2：【约15分钟】教师：使用relative属性值设置元素的相对定位，除了将position属性设置为relative之外，还需要指定一定的偏移量，水平方向使用left或right属性来指定，垂直方向使用top或bottom属性来指定。（案例演示）学生：（讨论分析）教师：总结下相对定位的特点：设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置。它对父级盒子和相邻的盒子都没有任何影响。设置相对定位的盒子原来的位置会被保留下来。新课讲解3：【约15分钟】教师：绝对定位同时需要配合top、left、bottom与right偏移量与参考依据来进行定位，与相对定位所不同的是，绝对定位的依据是该定位元素的最近且具有定位属性的祖先元素。（案例演示）学生：（讨论分析）教师：使用了绝对定位的元素(第二个盒子)以它最近的一个已经定位的“祖先”元素(#father)为基准进行偏移。绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素(第一个第三个盒子)的定位不会造成影响。进行绝对定位的元素没有没有指定宽高的话，在定位之后会有类似浮动的包裹特性，即元的宽高由内容的宽高决定。如果进行绝对定位的元素，找不到最近的已经定位的"祖先"元素，则将body元素作为定位的参考依据。这里的已定为指的是元素的定位置为relative、absolute或者fixed之一，通常是用relative与absolute进行组合使用，因为给参考元素仅仅添加相对定位属性而不提供偏移属性的话，对与参考元素没有任何影响。新课讲解4：【约15分钟】教师：掌握前两的两种定位之后，固定定位就简单多了，固定定位与绝对定位相似，唯一不同点同样出现在参考依据不同，固定定位的参考为浏览器的可视区域，并且使动态变换识别的，即浏览器窗口的大小变化，都会重新出发固定定位元素的重新定位渲染。（案例演示）学生：（讨论分析）教师：综合上面的结果我们可以总结处固定定位的特点：使用了固定定位的元素以浏览器的可视区域为基准进行偏移。固定定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响。进行固定定位的元素没有没有指定宽高的话，在定位之后会有类似浮动的包裹特性，即元的宽高由内容的宽高决定。新课讲解5：【约15分钟】教师：sticky是CSS3新增的属性；可以说是默认static定位和固定定位fixed的结合；当元素可以正常完整的显示在页面可视区域中的，和标准文档流中的普通元素相同；但是一旦由于页面滚动或其他原因导致不能在页面可视区域内显示时，便会显示出同固定定位一样的特性，固定于页面固定位置，不随滚动而改变位置。粘性定位的出现是为了解决，之前如果想实现页面内容不在可视区域时，可以动态进行定位方式的变更，必须要借助js进行复杂繁琐的页面滚动状态的判断弊端。作为CSS3的新特性，当前主流浏览器版本均能正常的支持该样式属性。新课讲解6：【约20分钟】教师：在上面的例子中我们发现定位的元素，最终的显示都是悬浮于标准文档流之上，那么如果两个定位元素的定位出现了重叠，那么其堆叠后的效果应该是如何？学生：（思考讨论）......后面的在上。教师：（案例演示）根据以上结果可以推出，如果定位元素出现了堆叠现象时，后出现在html代码的定位元素的权重更高，会覆盖在之前的定位元素之上显示。那么我们是否可以自定义这个权重，从而灵活控制定位元素的堆叠结果？答案是肯定的，这里我门是通过z-index属性来定义每一个定位元素的堆叠权重。z-index属性在立体空间中表示垂直于页面方向的z轴。z-index属性的值为整数，可以是正数也可以是负数。z-index属性默认值为0，z-index属性值大的层位于其值小的层上方。如果出现权重相同的情况，则根据元素出现顺序，后出现的权重较大会在显示在上层。新课讲解7：【约20分钟】教师：演示操作上机任务-制作课程层叠角标学生：跟做新课讲解8：【约20分钟】教师：演示操作上机任务-绝对定位实现登录页面居中学生：跟做新课讲解9：【约20分钟】教师：演示操作上机任务-固定定位置顶按钮学生：跟做新课讲解10：【约20分钟】教师：演示操作上机任务-粘性定位页面通用头部学生：跟做教学总结【约5分钟】本单元主要讲述定位概念，元素的定位属性及网页常见的