下面是小编为大家精心整理的浮动及定位_教学设计 清除浮动的影响的方法文章,供大家阅读参考。
. -
传智播客
《HTML5+CSS3设计基础教程》
教学设计
课程名称：HTML5+CSS3设计基础教程
授课年级：2016年级
授课学期：2016学年第一学期
教师：某某老师
201 年月日
- -可修编.
博学谷——让IT 教学更简单，让IT 学习更有效
2 课题名称 第6章 浮动与定位 计划
课时 8课时
容分析 通过前面几章的学习，初学者不难发现，在默认情况下，网页中的元素会按照
从上到下或从左到右的顺序一一罗列。如果仅仅按照这种默认的方式进行布局，
网页将会显得单调、混乱。为了使网页的布局更加丰富、合理，可以在CSS 中对元素设置浮动和定位属性。本章将对元素的浮动和定位进行详细讲解。
教学目标 ● 理解元素的浮动，能够为元素设置浮动样式。
● 熟悉清除浮动的方法，可以使用不同方法清除浮动。
● 掌握元素的定位，能够为元素设置常见的定位模式。
重点及措施 教学重点：元素的浮动属性float 、运用clear 属性清除浮动、运用overflow 属性
清除浮动、使用after 伪对象清除浮动、overflow 属性、元素的定位属性。
措施：通过上机操作加强学习和补充案例进行巩固。
难点及措施 教学难点：元素的浮动属性float 、overflow 属性、元素的定位属性。
措施：通过上机操作加强学习和补充案例进行巩固。
教学方式 教学采用教师课堂讲授为主，使用教学PPT 讲解。
教 学 过 程 第一课时
（讲解元素的浮动属性float 、清除浮动）
复习上节课容
在讲解本节容前，抛出以下问题让学生回答，以复习第五章“CSS 盒子模
型”的相关知识。
1、 一个盒子的宽（width ）和高（height ）均为300px ，左边距为30px ，同
时盒子有3px 的边框，请问这个盒子的总宽度是多少？（ ）
A 、333px
B 、366px
C 、336px
D 、363px
答案：C
● 盒子的总宽度= width+左右边距之和+左右边框宽度之和+左右外边距之和；
● 所以，盒子的总宽度= width （300px ）+左边距（30px ）+左右边框宽度之和（3px*2）=336px ；
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解
或直接进入本课时新容的学习。
本课时容学习
✧ 分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
初学者在设计一个页面时，通常会按照默认的排版方式，将页面中的元素
从上到下一一罗列，这样的布局制作出来的页面看起来呆板、不美观。其实，
. -
- -可修编.
博学谷——让IT教学更简单，让IT学习更有效
更熟练地掌握如何给元素设置浮动属性，并能够清除浮动元素带来的影响。
➢通过“补充案例”加强学习
教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补
充案例对相关知识点进行巩固。
第二课时
（讲解overflow属性）
复习上节课容
在讲解本节容前，抛出以下问题让学生回答，以复习上节课容。
1、在上节课中，我们已经学习了如何给元素设置浮动。由于浮动元素不再
占用原文档流的位置，对页面中其他元素的排版会产生影响，为了排除这种影
响，有时候需要我们清除元素的浮动。那么，如何使用clear属性清除元素的浮
动呢？请同学们讨论并举例说明。
请小组代表对以上问题发表见解。
教师对上述问题进行解释：
●由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素
的排版产生影响。在CSS中，通过clear属性清除浮动的方法是：给受
到浮动的元素应用clear属性。可以分别使用clear:left、clear:right、
clear:both;来清除元素左、右及左右两侧浮动的影响。
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解
或直接进入本课时新容的学习。
本课时容学习
✧分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
当盒子的元素超出盒子自身的大小时，容就会溢出，这时如果想要规溢出
容的显示方式，就需要使用CSS中的overflow属性。那么，请同学们讨论下：
overflow属性的属性值有哪些？各个属性值有什么作用？
请小组代表对以上问题发表见解。
答案：overflow属性的常用值有四个，分别表示不同的含义：
●visible：容不会被修剪，会呈现在元素框之外（默认值）。
●hidden：溢出容会被修剪，并且被修剪的容是不可见的。
●auto：在需要时产生滚动条，即自适应所要显示的容。
●scroll：溢出容会被修剪，且浏览器会始终显示滚动条。
✧知识点讲解
➢讲解“overflow属性”
（1）、教师通过PPT对“overflow属性”的作用进行讲解。
（2）、教师对“overflow属性”的基本语法格式进行讲解，并进行代码演
4
. -
示。
（3）、教师对“overflow属性”的四个常用属性值进行讲解，演示其具体用法和效果，通过对比分析不同属性值的异同。
（4）、教师指出应用“overflow属性”时需要注意的问题，并给予解答。
（5）、学生练习，教师巡视，对疑难问题进行解答。
✧阶段小结
➢小结
重点：overflow属性。
易错点：注意区分overflow不同属性值的用法。
➢答疑
教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识
点给与解释。
✧巩固练习
➢巩固本课时知识点
学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生
更熟练地掌握overflow属性的用法。
➢通过“补充案例”加强学习
教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补
充案例对相关知识点进行巩固。
➢完成“补充案例”，通过平台提交给教师，教师下节课进行点评。
➢预习6.3节【元素的定位】。
第三、四课时
（讲解元素的定位属性、静态定位、相对定位、绝对定位、固定定位、z-index
层叠等级属性）
说明：
将6.3小节作为两个课时进行讲解。
复习上节课容
在讲解本节容前，抛出以下问题让学生回答，以复习上节课容。
1、下列样式代码中，可实现元素的溢出容被修剪，且被修剪的容不可见
的是（）。
A、overflow:visible;
B、overflow:hidden;
C、overflow:auto;
D、overflow:scroll;
答案：B
答案解析：
overflow属性的常用值有四个，分别表示不同的含义：
●visible：容不会被修剪，会呈现在元素框之外（默认值）。
●hidden：溢出容会被修剪，并且被修剪的容是不可见的。
●auto：在需要时产生滚动条，即自适应所要显示的容。
●scroll：溢出容会被修剪，且浏览器会始终显示滚动条。
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解- -可修编.
博学谷——让IT教学更简单，让IT学习更有效
或直接进入本课时新容的学习。
本课时容学习
✧分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
元素的定位方式包括多种，例如：静态定位、相对定位、绝对定位、固定
定位等。那么，请同学们讨论下：什么是“相对定位”？
请小组代表对以上问题发表见解。
教师对上述问题进行解释：
相对定位是将元素相对于它在标准文档流中的位置进行定位，当position
属性的取值为relative时，可以将元素定位于相对位置。对元素设置相对定
位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍
然保留。
✧知识点讲解
➢讲解“元素的定位属性”
（1）、教师和学生互动：制作网页时，如果希望元素出现在某个特定的位
置，就需要使用定位属性对元素进行精确定位。元素的定位属性主要包括定位
模式和边偏移两部分。下面，将进行具体讲解。
（2）、教师分别针对“定位模式”和“边偏移”进行详细讲解。
（3）、教师对“定位模式”的基本语法格式进行讲解，并进行代码演示。
（4）、教师指出position属性的四个常用值，并进行分析。
（5）、学生练习，教师巡视，对疑难问题进行解答。
➢讲解“静态定位”
（1）、教师展示PPT对“静态定位”的概念进行讲解。。
（2）、教师针对“静态定位”进行详细讲解，并进行代码演示。
（3）、学生练习，教师巡视，对疑难问题进行解答。
➢讲解“相对定位”
（1）、教师展示PPT对“相对定位”的概念进行讲解。
（2）、教师针对“相对定位”进行详细讲解，并进行代码演示。
（3）、教师分析“相对定位”的用法及显示效果，对比其和“静态定位”
的区别与联系。
6
推荐访问:清除浮动的影响的方法 教学设计 浮动 定位
