《网站前端技术》教案第14课CSS与CSS3（五）.docx
课题第14课CSS与CSS3（五）课时2课时(90min)教学目标知识技能目标：掌握CSS浮动和定位布局、弹性布局素质目标：掌握CSS的相关知识，加深学生对网页制作的进一步了解，提升学生的知识储备教学重难点教学重点：CSS浮动和定位布局教学难点：CSS弹性布局（flex）教学方法问答法、讨论法、i并授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务一考勤（2min）一问题导入（5min）一传授新知（28min）一头脑风暴（IOmin）第2节课：问题导入（3min）一传授新知（27min）一上机操作（IOmin）一课堂小结（3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解CSS浮动和定位布局、弹性布局的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题进行网页布局时，可以通过设定哪些属性，使元素脱离正常的文档流？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（28min）3.9CSS浮动和定位布局【教师】讲解CSS浮动和定位布局的具体内容在网页设计中，HTML元素依照默认规则，会从上到下或从左到右依次排列布局，这被称为正常的文档流。进行网页布局时，可以通过为元素设定浮动或定位属性，使元素脱离正常的文档流，出现网页设计者希望的位置，满足网页布局的需要。3.9.1 浮动11oat通过教师讲解、课堂互动、演示操作等方式，使学生了解CSS浮动和定位布局的使用方法÷【多媒体】组织学生扫码播放“浮动foa视频（详见教材），让学生对这部分内容有一个大致地了解1 .设置浮动【课堂互动】【教师】提问浮动属性的主要作用是什么？【学生】聆听、思考、回答利用Ooat属性可以控制盒子向左或向右浮动，直到它的外边缘碰到包含框或另T浮动框的边框为止。浮动的元素会脱离原文档流。属性名称：float。属性的值：left（向左浮动）、right（向右浮动）、none（不浮动）.属性作用：使从上到下布局的块元素变为从左到右或从右到左布局。【示例3-9-1】编辑HTML文档<body>标签的内容，代码如下：<divclass="box"><divclass="red"><div><divclass="green"><div><divclass=*'blue,><div><div>在HTML文档<style>标签内写入CSS选择器：.box（border:Ipxsolid#ccc;background:pink;.redwidth:1OOpxzheight:100px;background:red;.greenwidth:1OOpxiheight:100px;background:green;）.bluewidth:l（X）px;height:10（）px;background:blue;效果：三个宽度为100px、高度为100px的盒子从上到下排列，颜色依次为红色、绿色、蓝色。【示例3-9-2】在【示例391】的.red、.green、.blue选择器中均添加以下声明：float:left:【教师】组织学生分组上机完成上面的任务，井在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“浮动属性设置效果”图片（详见教材），并讲解效果：三个盒子从左到右布局，且外层盒子变为一条粉色线条。2 .清除浮动想要避免由于浮动造成的页面结构混乱，需要清除浮动。CSS中常用的清除浮动的方法有以下几种.（1）使用空div标签清除浮动在父元素末尾布局一个空div标签，然后为这个标签设置CSS的clear属性来清除浮动对页面的影响。【课堂互动】使用空div标签清除浮动有哪些优缺点？÷【学生】聆听、思考、回答该方法的优点是简单、方便、兼容性好；缺点是需要额外添加一个元素，容易造成网页结构混乱，不利于网页后期维护。clear属性的值有left（在左侧不允许浮动元素）、right（在右侧不允许浮动元素）、both（在左右两侧均不允许浮动元素）.none（默认值，允许浮动元素出现在两侧）。【示例3-9-3在【示例3-9-2HTML文档.box内末尾添加标签.box4,代码如下：divclass="box4"div在VSIyIe标签内为.box4添加声明清除浮动，代码如下：.box4clear:both;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“使用Cleauboth清除浮动”图片（详见教材），并讲解效果：清除了浮动对父元素的影响。（2）使用伪元素:afer清除浮动为父元素添加一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的。【示例3-9-4在【示例3-9-2的style标签内为父元素.box添加一个伪元素，并设置伪元素的内容属性为空、显示属性为块元素、清除浮动声明。代码如下：.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属性用于规定当内容溢出元素框时如何处理。其属性值有以下几项。visible：默认值。内容不会被修剪，会呈现在元素框之外。hidden:内容会被修剪，且修剪的内容不可见。scroll：内容会被修剪，但是浏览器会显示滚动条以便查看修剪的内容。auto:自动确定内容是否被修剪。如果内容被修剪，则浏览器会显示滚动条以便查看修剪的内容。3.9.2 定位position通过定位属性，可以精准的控制元素在网页中的位置。定位分为静态定位、相对定位、绝对定位、固定定位这四种。属性的值：relative（相对定位，相对于原文档流的位置进行定；absolute（绝对定位，相对上一个已经定位的父元素进行定位）；fixed（固定定位，相对于浏览器窗口进行定位）；static（静态定位，为默认值）.边偏移：在使用position定位时,通过边偏移属性lop、right、bottom,left可精准定位元素的位置。这些属性是距离某一位置上右下左的距离,取值为数值或百分比。【示例3-9-6编辑HTML文档<body>标签的内容，代码如下：<divid="boxl,'><divid="box2',><divid="box3',xdiv><div><div>在HTML文档<style>标签内写入CSS选择器，控制各元素样式：（1）所有元素计算盒子尺寸方式为包含边框；外边距为0,内边距为Oe（2）#boxl为宽度300px、高度300px、红色背景、外边距5（）px、内边距50px.（3）#box2为宽度200px、高度200px、蓝色背景、内边距50px.（4）#box3为宽度100PX、高度100PX、粉色背景。【教师】组织学生分组上机完成上面的任务，井在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“定位属性设置前效果”图片（详见教材），并讲解效果：三个互相嵌套的盒子,均没有定位.2 .相对定位relative相对定位relative是相对于元素自身在原文档流的位置定位配合IopZboltom和IeftZright使用。【示例3-9-7为【示例3-9-6中的#box3选择器添加如下声明：Positionirelative;top:50px;IefclOOpx;效果：最内层盒子#box3相对于所示位置从上向下偏移50px,从左向右偏移100px.3 .绝对定位absolute绝对定位absolute是相对于离自己最近的具有定位属性的父元素的偏移。【示例398】为【示例3-9-7中的选择器#box1添加声明：Positionirelative;将选择器#box3的定位相关声明修改如下：Positionzabsolute;bottom:50px;left:100px;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“绝对定位设置效果1"图片（详见教材），并讲解效果：最外层盒子粕oxi添加了相对定位声明；最内层的盒子#box3相对于最近的具有定位属性的父元素粕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;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】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进行网页布局的重要属性之一，用于规定元素是否显示或如何显示。【课堂互动】十【教师】提问显示display属性常用的属性值有哪些？)【学生】聆听、思考、回答(1)none(不显示)。隐藏元素，且不为隐藏的对象保留其物理空间。这一功能经常被应用于JaVaSCriPI交互控制效果，如选项卡、轮播图等。(2)block(块元素).将元素作为块元素显示。<div><p>等标签自带该属性设置,如果是行元素应用该属性设置，会变为块元素。（3）inline（行元素）0将元素作为行元素显示。a、span标签自带该属性设置，如果是块元素应用该属性设置，会变为行元素。（4）inline-block（行内块元素）.元素既有块元素的宽和高属性，又能像行元素一样不独占一行显示。img标签自带该属性设置。（5）flex（弹性盒）。将元素作为弹性盒显示。【学生】聆听、记录、理解通过头脑风暴的 形式，活跃课堂气 氛，引发学生思考， 培养学生的创新能 力和团队精神【教师】根据头脑风暴主题，组织学生分组开展讨论头脑风暴（10 min）根据各队伍的网站主题讨论如何使用本节课中的oa（属性控制盒子浮动使用position定位的边偏移属性top、right、bottom、Ieft精准定位元素的位置。【学生】思考、讨论第二节课问题导入（3min）【教师】提出以下问题什么是CSS弹性布局？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知（27min）3.10CSS弹性布局（flex）【教师】讲解CSS弹性布局（flex）的具体内容Aex是flexiblebox的缩写，意为"弹性容器（盒）"或"弹性布局模型”.在弹性布局模型中，弹性容器（盒）的子元素可以在设置的水平或垂直方向上排列和对齐；还可以“弹性伸缩"其尺寸，即既可以增加其尺寸以填满未使用的空间，也可以收缩其尺寸以避免溢出。相比浮动和定位布局，利用弹性布局模型可以更快捷、更灵活地设计网页的布局。【课堂互动】十【教师】提问弹性布局的主要属性有哪些？十【学生】聆听、思考、回答要对网页进行弹性布局,首先需要定义弹性容器（称为Ilex容器），即利用display属性的Oex值将父元素定义为弹性容器；然后设置父元素的flex-direction（主轴方向）、flexwrap（换行）、jUstify-Content（主轴对齐）等flex属性,以确定子元素（称为flex项目）在容器中的排列、换行和对齐方式等。还可设置子元素的Order（排列顺序）、ex-grow（放大）、flex-shrink（缩小）等Hex属性，以确定子元素的排列顺序及“弹性伸缩”方式等.3.10.1主轴方向flex-directionflex-direction属性用于定义flex容器主轴的方向，以确定容器内元素的排列方向。其语法格式如下：flex-direction:row|row-reverse|column|column-reverse;（1）row（默认值）：主轴为水平方向，起点在左端。（2）row-reverse：主轴为水平方向，起点在右端。通过教师讲解、课堂互动、演示操作等方式，让学生了解CSS弹性布局的使用方法示例3-10-1编辑HTML文档<body>标签的内容，代码如下：<divid="main"><divclass="box">1<div><divclass="box">2<div><divclass="box">3<div><div>在文档<style>标签内写入CSS选择器，并定义选择器样式：(1)#main元素的宽度为500PX,高度为自动，边框为2px、红色、实心线，外边8巨为50px.(2),box元素的宽度和高度均为IOoPX,背景色为#9ACD32,外源巨为IOpx,行高为100px,字号为30PX,文本对齐方式为居中，文字颜色为白色.为#main元素添加CSS声明：display:flex;flex-direction:row-reverse;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“row-reverse显示效果""row、column和column-reverse显示效果”图片(详见教材)，并讲解效果：通过display:ex定义#main为flex容器；通过flex-direction:row-reverse定义#main容器内元素的排列方式为从右向左，起点在右端。3.10.2换行方式flex-wrap默认情况下，Aex容器内的元素都排在一条线(水平或垂直轴线)上.flex-wrap属性用于定义如果一条轴线排不下这些元素时如何换行。其语法格式如下：ex-wrapnowrapwrapwrap-reverse;(1)nowrap：默认值，不换行，此时各子元素分为以下两种情况进行弹性缩放：各子元素按设置的宽度(或高度)的比例弹性缩放，显示在父元素中。通过Aex属性为各子元素设置比例系数，以将子元素弹性缩放，显示在父元素中。(2)wrap：换行，第一行在上方。(3)wrap-reverse：换行,第一行在下方。【示例3-10-2重新编辑【示例3-10-1<body>标签的内容，代码如下：<divid="main"><divclass="box">1<div><divclass="box">2<div><divclass="box">3<div><divclass="box">4<div><divclass="box">5<div><div>将【示例3-10-1#main选择器的声明修改为以下代码(修改flex-direction的属性值和添加flex-wrap属性)：Width:500px;heighCauto;border:2pxredsolid;display:flex:flex-direction:row;flex-wrap:Wrap:【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“wrap显示效果"、"nowr叩和WraP-reverse显示效果”图片(详见教材)，并讲解效果：通过11exwrap属性设置元素的换行方式为wrap。【示例3-10-3】重新编辑【示例3-10-2<body>标签的内容，代码如下：<divid="main"><divclass="box"style="widlh:100pxf'>l<div><divclass="box"style="widih:200px;">2</div><divclass="box"style="width:3(X)px;M>3</div><divclass="box"style="width:2(X)px;">4</div><divclass="box"style="width:100pxf,>5<div><div>将其中#main选择器的换行方式修改为不换行，代码如下：flex-wrap:nowarp;效果：#main中的各个子元素按照width属性值的比例缩放显示。【示例3-10-4】重新编辑【示例3/0-3】<body>标签的内容，代码如下：<divid="main'>><divclass="box"style="flex:1;">l</div><divclass="box"style="flex:2;">2</div><divclass="box"style="flex:3;">3</div><divclass="box,'style="flex:2;">4</div><divclass="box"style="flex:1">5<div><div>效果：#main中的各个子元素按照Hex属性值的比例缩放显示。【提示】在弹性布局中，除可设置弹性容器的属性外，还可设置容器中各子元素的属性，以控制各子元素的显示效果。这些属性主要包括：Order属性：定义子元素的排列顺序。属性值为n(非负数，如0,1,2,3.),数值越小，该子元素的排列越靠前，默认为0。flex-grow属性：定义子元素在弹性容器的剩余空间中所占的相对比例。属性值为n(非负数),默认为0,表示存在剩余空间也不放大。若一个子元素的属性值为2,其他子元素的属性值都为1,则前者占据的剩余空间将比其他子元素的多T；以此类推.(详见教材)3.10.3 综合设置11ex-11owex-flow属性是Ilex-direction属性和flex-wrap属性的简写形式，默认值为rownowra其语法格式如下：flex-flow:flex-directionflex-wrap;3.10.4 主轴对齐justify-contentjustify-content属性用于定义子元素在弹性容器主轴上的对齐方式。其语法格式如下。justify-content:flex-start|flex-end|center|space-between|space-around;在CSS中，网页元素的背景颜色用background-color属性来设置.(1)flex-start(默认值)：与主轴的起点对齐。(2)flex-end:与主轴的终点对齐。(3)center：与主轴的终点对齐。(4)space-between:与主轴的两端对齐，每个子元素之间的间隔相等。【示例3-10-5重新编辑【示例3-102】<body>标签的内容，代码如下：wid(h:700px;height:auto;border:2pxredsolid;display:flex;ex-owownowrap;justify-content:flex-end;【教师】组织学生分组上机完成上面的任务，井在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示"flex-end效果”"flex-start、center、SPaCe-between、space-around显示效果”图片(详见教材)，并讲解效果：flex-flow:rownowrap:用于设置元素水平显示不换行；justify-content:flex-end：用于设置元素右对齐。3.10.5 交叉轴对齐align-itcmsflex容器中的轴分为主轴和交叉轴。其中，主轴是使用11ex-direction属性定义的轴；交叉轴是与主轴垂直的轴。align-iiems属性用于定义flex容器中的元素在交叉轴上的对齐方式。其语法格式为：align-items:flex-start|flex-end|center|baseline|stretch;(1)flex-start：与交叉轴的起点对齐。(2)flex-end：与交叉轴的终点对齐。(3)center：与交叉轴的中点对齐。(4)baseline：与元素的第一行文字的基线对齐。(5)stretch(默认值)：如果元素未设置高度或高度设为au(o,元素将占满整个容器的高度。【示例3-10-6将【示例3-10-5<body>中的代码修改如下(各盒子高度和和文本行高不同)：<divid="main"><divclass="box"style="height:70px;line-height:70px;">l</div><divclass="box"style="height:3()px;line-height:30px;">2</div><divclass="box"style="height:60px;line-height:60px;">3</div><divclass="box"style="height:100px;line-height:100px;">4</div><divclass="box"style="height:50px:line-height:50px;">5</div><div>将#main选择器的声明修改如下：width:700px;heighc300px;border:2pxredsolid;display:flex;flex-direction:row;align-items:flex-start;【教师】PPt展示“align-itemsfex-start应用效果""align-items其他属性值应用效果”图片(详见教材),并讲解效果：flex-direclion:row定义主轴为水平方向,起点在左端；align-items:flex-start定义元素为交叉轴起点对齐。3.10.6多轴线对齐align-content*Ialign-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。align-contenCflex-startflex-endcenterspace-betweenstretchspace-around;(I)flex-start：与交叉轴的起点对齐。(2)flex-end:与交叉轴的终点对齐。(3)center：与交叉轴的中点对齐。(4)space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。(5)space-around：每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框的间隔大TS(6)stretch(默认值)：轴线占满整个交叉轴。【示例3-1()-7将【示例3-10-5中的#main选择器的生命修改为以下代码：width:500px;heighc300px;display:flex;border:2pxredsolid;flex-flow:rowwrap;align-contencspace-between;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“align-Content:SPaCe-between应用效果""flex-start、flexend.center,space-around应用效果”图片(详见教材)，并讲解效果：五个盒子排列在两行，纵轴空间在两行之间。【学生】聆听、记录、理解上机操作(10min)【教师】织学生分组讨论，上机完成以下任务在之前创建的course.html文件中，利用float属性设置第一个盒子向左浮动，且外层盒子变为一条紫色线条，将#box1设置为宽度100PX、高度IooPX、粉色背景。将最内层的盒子#53脱离原有的文档流浮在最上层，并相对于浏览器窗口的最上端向下偏移50px、最左端向右偏移I(X)PX,不受父元素的控制。【学生】讨论、上机操作通过上机操作巩固所学知识课堂小结(3min)【教师】简要总结本节课的要点本节课主要学习了CSS浮动和定位布局、CSS弹性布局的主要内容，希望通过本节课的讲解，大家可以掌握这三种布局的使用方法，学会更快捷、更灵活地设计网页的布局。【学生】总结回顾知识点总结知识点，巩固学生对CSS浮动和定位布局、CSS弹性布局相关知识的印象作业布置(2min)【教师】布置课后作业个人作业：请根据课堂所学知识，完成课后习题团队作业：围绕第一节课制定的主题项目，使用本节课所学的float属性、POSition定位的topxrighlbottom,left边偏移属性、display属性进行设计，并形成文档上传至APP通过课后作业复习巩固学到的知识，提高学生的理解能力【学生】完成课后任务*本节课效果不错,学生全程积极参与。教学中，教师应为学生提供充分表达自己的机会和空间，这样才能让学生开启顿悟，从而进行更有效的教育。
