《网站前端技术》教案第14课CSS与CSS3（五）.docx

《《网站前端技术》教案第14课CSS与CSS3（五）.docx》由会员分享，可在线阅读，更多相关《《网站前端技术》教案第14课CSS与CSS3（五）.docx（14页珍藏版）》请在第壹文秘上搜索。

1、课题第14课CSS与CSS3（五）课时2课时(90min)教学目标知识技能目标：掌握CSS浮动和定位布局、弹性布局素质目标：掌握CSS的相关知识，加深学生对网页制作的进一步了解，提升学生的知识储备教学重难点教学重点：CSS浮动和定位布局教学难点：CSS弹性布局（flex）教学方法问答法、讨论法、i并授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务一考勤（2min）一问题导入（5min）一传授新知（28min）一头脑风暴（IOmin）第2节课：问题导入（3min）一传授新知（27min）一上机操作（IOmin）一课堂小结（3min）一作业布置（2min）教

2、学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解CSS浮动和定位布局、弹性布局的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题进行网页布局时，可以通过设定哪些属性，使元素脱离正常的文档流？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授

3、新知（28min）3.9CSS浮动和定位布局【教师】讲解CSS浮动和定位布局的具体内容在网页设计中，HTML元素依照默认规则，会从上到下或从左到右依次排列布局，这被称为正常的文档流。进行网页布局时，可以通过为元素设定浮动或定位属性，使元素脱离正常的文档流，出现网页设计者希望的位置，满足网页布局的需要。3.9.1 浮动11oat通过教师讲解、课堂互动、演示操作等方式，使学生了解CSS浮动和定位布局的使用方法【多媒体】组织学生扫码播放“浮动foa视频（详见教材），让学生对这部分内容有一个大致地了解1 .设置浮动【课堂互动】【教师】提问浮动属性的主要作用是什么？【学生】聆听、思考、回答利用Ooat属

4、性可以控制盒子向左或向右浮动，直到它的外边缘碰到包含框或另T浮动框的边框为止。浮动的元素会脱离原文档流。属性名称：float。属性的值：left（向左浮动）、right（向右浮动）、none（不浮动）.属性作用：使从上到下布局的块元素变为从左到右或从右到左布局。【示例3-9-1】编辑HTML文档标签的内容，代码如下：在HTML文档标签内写入CSS选择器：.box（border:Ipxsolid#ccc;background:pink;.redwidth:1OOpxzheight:100px;background:red;.greenwidth:1OOpxiheight:100px;backgr

5、ound:green;）.bluewidth:l（X）px;height:10（）px;background:blue;效果：三个宽度为100px、高度为100px的盒子从上到下排列，颜色依次为红色、绿色、蓝色。【示例3-9-2】在【示例391】的.red、.green、.blue选择器中均添加以下声明：float:left:【教师】组织学生分组上机完成上面的任务，井在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“浮动属性设置效果”图片（详见教材），并讲解效果：三个盒子从左到右布局，且外层盒子变为一条粉色线条。2 .清除浮动想要避免由于浮动造

6、成的页面结构混乱，需要清除浮动。CSS中常用的清除浮动的方法有以下几种.（1）使用空div标签清除浮动在父元素末尾布局一个空div标签，然后为这个标签设置CSS的clear属性来清除浮动对页面的影响。【课堂互动】使用空div标签清除浮动有哪些优缺点？【学生】聆听、思考、回答该方法的优点是简单、方便、兼容性好；缺点是需要额外添加一个元素，容易造成网页结构混乱，不利于网页后期维护。clear属性的值有left（在左侧不允许浮动元素）、right（在右侧不允许浮动元素）、both（在左右两侧均不允许浮动元素）.none（默认值，允许浮动元素出现在两侧）。【示例3-9-3在【示例3-9-2HTML文档

7、.box内末尾添加标签.box4,代码如下：divclass=box4div在VSIyIe标签内为.box4添加声明清除浮动，代码如下：.box4clear:both;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“使用Cleauboth清除浮动”图片（详见教材），并讲解效果：清除了浮动对父元素的影响。（2）使用伪元素:afer清除浮动为父元素添加一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的。【示例3-9-4在【示例3-9-2的style标签内为父元素.box添加一个伪元素，

8、并设置伪元素的内容属性为空、显示属性为块元素、清除浮动声明。代码如下：.tx）x:after（content:;display:block;cleaboh;效果：清除了浮动对父元素的影响，父元素被撑开。（3）使用overflow属性为父元素添加OVerfIoW属性并耳各值设为hidden或auto,可以清除浮动对父元素的影响。【示例3-9-5在【示例3-9-2的style标签内为父元素.box添加overflow:hidden属性。代码如下：overflow：hidden;效果：清除了浮动对父元素的影响，父元素被撑开。【提示】overflow属性用于规定当内容溢出元素框时如何处理。其属性值有以

9、下几项。visible：默认值。内容不会被修剪，会呈现在元素框之外。hidden:内容会被修剪，且修剪的内容不可见。scroll：内容会被修剪，但是浏览器会显示滚动条以便查看修剪的内容。auto:自动确定内容是否被修剪。如果内容被修剪，则浏览器会显示滚动条以便查看修剪的内容。3.9.2 定位position通过定位属性，可以精准的控制元素在网页中的位置。定位分为静态定位、相对定位、绝对定位、固定定位这四种。属性的值：relative（相对定位，相对于原文档流的位置进行定；absolute（绝对定位，相对上一个已经定位的父元素进行定位）；fixed（固定定位，相对于浏览器窗口进行定位）；stat

10、ic（静态定位，为默认值）.边偏移：在使用position定位时,通过边偏移属性lop、right、bottom,left可精准定位元素的位置。这些属性是距离某一位置上右下左的距离,取值为数值或百分比。【示例3-9-6编辑HTML文档标签的内容，代码如下：在HTML文档标签内写入CSS选择器，控制各元素样式：（1）所有元素计算盒子尺寸方式为包含边框；外边距为0,内边距为Oe（2）#boxl为宽度300px、高度300px、红色背景、外边距5（）px、内边距50px.（3）#box2为宽度200px、高度200px、蓝色背景、内边距50px.（4）#box3为宽度100PX、高度100PX、粉色

11、背景。【教师】组织学生分组上机完成上面的任务，井在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“定位属性设置前效果”图片（详见教材），并讲解效果：三个互相嵌套的盒子,均没有定位.2 .相对定位relative相对定位relative是相对于元素自身在原文档流的位置定位配合IopZboltom和IeftZright使用。【示例3-9-7为【示例3-9-6中的#box3选择器添加如下声明：Positionirelative;top:50px;IefclOOpx;效果：最内层盒子#box3相对于所示位置从上向下偏移50px,从左向右偏移100px.

12、3 .绝对定位absolute绝对定位absolute是相对于离自己最近的具有定位属性的父元素的偏移。【示例398】为【示例3-9-7中的选择器#box1添加声明：Positionirelative;将选择器#box3的定位相关声明修改如下：Positionzabsolute;bottom:50px;left:100px;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“绝对定位设置效果1图片（详见教材），并讲解效果：最外层盒子粕oxi添加了相对定位声明；最内层的盒子#box3相对于最近的具有定位属性的

13、父元素粕OX1的下边向上偏移50px、左边向右偏移100pxe【示例3-9-9为【示例3-9-8中的#box2选择器添加声明：Positionirelative;效果：#box2具有相对定位属性；最内层盒子#box3相对于最近的具有定位属性的父元素粕0*2下边向上偏移50px、左边向右偏移100px.4 .固定定位fixed固定定位fixed是相对于浏览器窗口的定位。【示例3-9-10】将【示例3-9-9中#8乂3选择器的定位相关声明修改如下：POSilion:fixed;top:50px;IeftilOOpx;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后

14、教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“固定定位属性设置效果”图片(详见教材)，并讲解效果：最内层的盒子#box3脱离原有的文档流浮在最上层,并相对于浏览器窗口的最上端向下偏移5()px、最左端向右偏移I(X)px,不受父元素的控制。特殊用法：对于固定定位，如果设置外边距为自动、上下左右偏移量为0,可实现元素位于整个浏览器窗口的正中央。【示例3-9-11将【示例3-9-10中#box3选择器的定位相关声明修改如下：POSition:fixed;margin:auto;top:0：left:0;right:0;bottom:0;效果：无论浏览器窗口如何缩小放大，滚动条如何拖动，盒子#box3都位于窗口最中央，不受其他元素限制。5 .静态定位static静态定位SIatiC是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中的默认位置。3.9.3 显示displaydisplay属性是使用CSS进行网页布局的重要属性之一，用于规定元素是否显示或如何显示。【课堂互动】十【教师】提问显示disp