《网站前端技术》（梁玲）621-7 教案 第14课 CSS与CSS3（五）_第1页
《网站前端技术》（梁玲）621-7 教案 第14课 CSS与CSS3（五）_第2页
《网站前端技术》（梁玲）621-7 教案 第14课 CSS与CSS3（五）_第3页
《网站前端技术》（梁玲）621-7 教案 第14课 CSS与CSS3（五）_第4页
《网站前端技术》（梁玲）621-7 教案 第14课 CSS与CSS3（五）_第5页
已阅读5页，还剩6页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

课题第14课CSS与CSS3（五）课时2课时（90min）教学目标知识技能目标：掌握CSS浮动和定位布局、弹性布局素质目标：掌握CSS的相关知识，加深学生对网页制作的进一步了解，提升学生的知识储备教学重难点教学重点：CSS浮动和定位布局教学难点：CSS弹性布局（flex）教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂APP教学设计第1节课：→→→传授新知（28min）→头脑风暴（10min）第2节课：→传授新知（27min）→上机操作（10min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务请大家了解CSS浮动和定位布局、弹性布局的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题进行网页布局时，可以通过设定哪些属性，使元素脱离正常的文档流？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知

（28min）3.9CSS浮动和定位布局【教师】讲解CSS浮动和定位布局的具体内容在网页设计中，HTML元素依照默认规则，会从上到下或从左到右依次排列布局，这被称为正常的文档流。进行网页布局时，可以通过为元素设定浮动或定位属性，使元素脱离正常的文档流，出现网页设计者希望的位置，满足网页布局的需要。3.9.1浮动float✈【多媒体】组织学生扫码播放“浮动float”视频（详见教材），让学生对这部分内容有一个大致地了解设置浮动【课堂互动】✈【教师】提问浮动属性的主要作用是什么？✈【学生】聆听、思考、回答利用float属性可以控制盒子向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动的元素会脱离原文档流。属性名称：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:1pxsolid#ccc;background:pink;}.red{width:100px;height:100px;background:red;}.green{width:100px;height:100px;background:green;}.blue{width:100px;height:100px;background:blue;}效果：三个宽度为100px、高度为100px的盒子从上到下排列，颜色依次为红色、绿色、蓝色。【示例3-9-2】在【示例3-9-1】的.red、.green、.blue选择器中均添加以下声明：float:left;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“浮动属性设置效果”图片（详见教材），并讲解效果：三个盒子从左到右布局，且外层盒子变为一条粉色线条。清除浮动想要避免由于浮动造成的页面结构混乱，需要清除浮动。CSS中常用的清除浮动的方法有以下几种。（1）使用空div标签清除浮动在父元素末尾布局一个空div标签，然后为这个标签设置CSS的clear属性来清除浮动对页面的影响。【课堂互动】✈【教师】提问使用空div标签清除浮动有哪些优缺点？✈【学生】聆听、思考、回答该方法的优点是简单、方便、兼容性好；缺点是需要额外添加一个元素，容易造成网页结构混乱，不利于网页后期维护。clear属性的值有left（在左侧不允许浮动元素）、right（在右侧不允许浮动元素）、both（在左右两侧均不允许浮动元素）、none（默认值，允许浮动元素出现在两侧）。【示例3-9-3】在【示例3-9-2】HTML文档.box内末尾添加标签.box4，代码如下：<divclass="box4"></div>在<style>标签内为.box4添加声明清除浮动，代码如下：.box4{clear:both;}【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“使用clear:both清除浮动”图片（详见教材），并讲解效果：清除了浮动对父元素的影响。（2）使用伪元素:after清除浮动为父元素添加一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的。【示例3-9-4】在【示例3-9-2】的<style>标签内为父元素.box添加一个伪元素，并设置伪元素的内容属性为空、显示属性为块元素、清除浮动声明。代码如下：.box:after{ content:""; display:block; clear:both;}效果：清除了浮动对父元素的影响，父元素被撑开。（3）使用overflow属性为父元素添加overflow属性并将值设为hidden或auto，可以清除浮动对父元素的影响。【示例3-9-5】在【示例3-9-2】的<style>标签内为父元素.box添加overflow:hidden属性。代码如下：overflow：hidden;效果：清除了浮动对父元素的影响，父元素被撑开。【提示】overflow属性用于规定当内容溢出元素框时如何处理。其属性值有以下几项。visible：默认值。内容不会被修剪，会呈现在元素框之外。hidden：内容会被修剪，且修剪的内容不可见。scroll：内容会被修剪，但是浏览器会显示滚动条以便查看修剪的内容。auto：自动确定内容是否被修剪。如果内容被修剪，则浏览器会显示滚动条以便查看修剪的内容。3.9.2定位position通过定位属性，可以精准的控制元素在网页中的位置。定位分为静态定位、相对定位、绝对定位、固定定位这四种。1.定位属性概述属性名称：position属性的值：relative（相对定位，相对于原文档流的位置进行定；absolute（绝对定位，相对上一个已经定位的父元素进行定位）；fixed（固定定位，相对于浏览器窗口进行定位）；static（静态定位，为默认值）。边偏移：在使用position定位时，通过边偏移属性top、right、bottom、left可精准定位元素的位置。这些属性是距离某一位置上右下左的距离，取值为数值或百分比。【示例3-9-6】编辑HTML文档<body>标签的内容，代码如下：<divid="box1"> <divid="box2"> <divid="box3"></div> </div></div>在HTML文档<style>标签内写入CSS选择器，控制各元素样式：（1）所有元素计算盒子尺寸方式为包含边框；外边距为0，内边距为0。（2）#box1为宽度300px、高度300px、红色背景、外边距50px、内边距50px。（3）#box2为宽度200px、高度200px、蓝色背景、内边距50px。（4）#box3为宽度100px、高度100px、粉色背景。【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“定位属性设置前效果”图片（详见教材），并讲解效果：三个互相嵌套的盒子，均没有定位。2.相对定位relative相对定位relative是相对于元素自身在原文档流的位置定位，配合top/bottom和left/right使用。【示例3-9-7】为【示例3-9-6】中的#box3选择器添加如下声明：position:relative;top:50px;left:100px;效果：最内层盒子#box3相对于所示位置从上向下偏移50

px，从左向右偏移100px。3.绝对定位absolute绝对定位absolute是相对于离自己最近的具有定位属性的父元素的偏移。【示例3-9-8】为【示例3-9-7】中的选择器#box1添加声明：position:relative;将选择器#box3的定位相关声明修改如下：position:absolute;bottom:50px;left:100px;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“绝对定位设置效果1”图片（详见教材），并讲解效果：最外层盒子#box1添加了相对定位声明；最内层的盒子#box3相对于最近的具有定位属性的父元素#box1的下边向上偏移50px、左边向右偏移100px。【示例3-9-9】为【示例3-9-8】中的#box2选择器添加声明：position:relative;效果：#box2具有相对定位属性；最内层盒子#box3相对于最近的具有定位属性的父元素#box2下边向上偏移50px、左边向右偏移100px。4.固定定位fixed固定定位fixed是相对于浏览器窗口的定位。【示例3-9-10】将【示例3-9-9】中#box3选择器的定位相关声明修改如下：position:fixed;top:50px;left:100px;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“固定定位属性设置效果”图片（详见教材），并讲解效果：最内层的盒子#box3脱离原有的文档流浮在最上层，并相对于浏览器窗口的最上端向下偏移50px、最左端向右偏移100px，不受父元素的控制。特殊用法：对于固定定位，如果设置外边距为自动、上下左右偏移量为0，可实现元素位于整个浏览器窗口的正中央。【示例3-9-11】将【示例3-9-10】中#box3选择器的定位相关声明修改如下：position:fixed;margin:auto;top:0;left:0;right:0;bottom:0;效果：无论浏览器窗口如何缩小放大，滚动条如何拖动，盒子#box3都位于窗口最中央，不受其他元素限制。5.静态定位static静态定位static是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中的默认位置。3.9.3显示displaydisplay属性是使用CSS进行网页布局的重要属性之一，用于规定元素是否显示或如何显示。【课堂互动】✈【教师】提问显示display属性常用的属性值有哪些？✈【学生】聆听、思考、回答（1）none（不显示）。隐藏元素，且不为隐藏的对象保留其物理空间。这一功能经常被应用于JavaScript交互控制效果，如选项卡、轮播图等。（2）block（块元素）。将元素作为块元素显示。<div>、<p>等标签自带该属性设置，如果是行元素应用该属性设置，会变为块元素。（3）inline（行元素）。将元素作为行元素显示。<a>、<span>标签自带该属性设置，如果是块元素应用该属性设置，会变为行元素。（4）inline-block（行内块元素）。元素既有块元素的宽和高属性，又能像行元素一样不独占一行显示。<img>标签自带该属性设置。（5）flex（弹性盒）。将元素作为弹性盒显示。【学生】聆听、记录、理解通过教师讲解、课堂互动、演示操作等方式，使学生了解CSS浮动和定位布局的使用方法头脑风暴（10min）【教师】根据头脑风暴主题，组织学生分组开展讨论根据各队伍的网站主题，讨论如何使用本节课中的float属性控制盒子浮动，使用position定位的边偏移属性top、right、bottom、left精准定位元素的位置。【学生】思考、讨论通过头脑风暴的形式，活跃课堂气氛，引发学生思考，培养学生的创新能力和团队精神第二节课问题导入（3min）【教师】提出以下问题什么是CSS弹性布局？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知

（27min）3.10CSS弹性布局（flex）【教师】讲解CSS弹性布局（flex）的具体内容flex是flexiblebox的缩写，意为“弹性容器（盒）”或“弹性布局模型”。在弹性布局模型中，弹性容器（盒）的子元素可以在设置的水平或垂直方向上排列和对齐；还可以“弹性伸缩”其尺寸，即既可以增加其尺寸以填满未使用的空间，也可以收缩其尺寸以避免溢出。相比浮动和定位布局，利用弹性布局模型可以更快捷、更灵活地设计网页的布局。【课堂互动】✈【教师】提问弹性布局的主要属性有哪些？✈【学生】聆听、思考、回答要对网页进行弹性布局，首先需要定义弹性容器（称为flex容器），即利用display属性的flex值将父元素定义为弹性容器；然后设置父元素的flex-direction（主轴方向）、flex-wrap（换行）、justify-content（主轴对齐）等flex属性，以确定子元素（称为flex项目）在容器中的排列、换行和对齐方式等。还可设置子元素的order（排列顺序）、flex-grow（放大）、flex-shrink（缩小）等flex属性，以确定子元素的排列顺序及“弹性伸缩”方式等。3.10.1主轴方向flex-directionflex-direction属性用于定义flex容器主轴的方向，以确定容器内元素的排列方向。其语法格式如下：flex-direction:row|row-reverse|column|column-reverse;（1）row（默认值）：主轴为水平方向，起点在左端。（2）row-reverse：主轴为水平方向，起点在右端。（3）column：主轴为垂直方向，起点在上端。（4）column-reverse：主轴为垂直方向，起点在下端。【示例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、红色、实心线，外边距为50px。（2）.box元素的宽度和高度均为100px，背景色为#9ACD32，外边距为10px，行高为100px，字号为30px，文本对齐方式为居中，文字颜色为白色。为#main元素添加CSS声明：display:flex;flex-direction:row-reverse;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“row-reverse显示效果”“row、column和column-reverse显示效果“图片（详见教材），并讲解效果：通过display:flex定义#main为flex容器；通过flex-direction:row-reverse定义#main容器内元素的排列方式为从右向左，起点在右端。3.10.2换行方式flex-wrap默认情况下，flex容器内的元素都排在一条线（水平或垂直轴线）上。flex-wrap属性用于定义如果一条轴线排不下这些元素时如何换行。其语法格式如下：flex-wrap:nowrap|wrap|wrap-reverse;（1）nowrap：默认值，不换行，此时各子元素分为以下两种情况进行弹性缩放：①各子元素按设置的宽度（或高度）的比例弹性缩放，显示在父元素中。②通过flex属性为各子元素设置比例系数，以将子元素弹性缩放，显示在父元素中。（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;height:auto;border:2pxredsolid;display:flex;flex-direction:row;flex-wrap:wrap;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“wrap显示效果”、“nowrap和wrap-reverse显示效果“图片（详见教材），并讲解效果：通过flex-wrap属性设置元素的换行方式为wrap。【示例3-10-3】重新编辑【示例3-10-2】<body>标签的内容，代码如下：<divid="main"> <divclass="box"style="width:100px;">1</div> <divclass="box"style="width:200px;">2</div> <divclass="box"style="width:300px;">3</div> <divclass="box"style="width:200px;">4</div> <divclass="box"style="width:100px;">5</div></div>将其中#main选择器的换行方式修改为不换行，代码如下：flex-wrap:nowarp;效果：#main中的各个子元素按照width属性值的比例缩放显示。【示例3-10-4】重新编辑【示例3-10-3】<body>标签的内容，代码如下：<divid="main"> <divclass="box"style="flex:1;">1</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中的各个子元素按照flex属性值的比例缩放显示。【提示】在弹性布局中，除可设置弹性容器的属性外，还可设置容器中各子元素的属性，以控制各子元素的显示效果。这些属性主要包括：order属性：定义子元素的排列顺序。属性值为n（非负数，如0，1，2，3……），数值越小，该子元素的排列越靠前，默认为0。flex-grow属性：定义子元素在弹性容器的剩余空间中所占的相对比例。属性值为n（非负数），默认为0，表示存在剩余空间也不放大。若一个子元素的属性值为2，其他子元素的属性值都为1，则前者占据的剩余空间将比其他子元素的多一倍；以此类推。……（详见教材）3.10.3综合设置flex-flowflex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为rownowrap。其语法格式如下：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：与主轴的两端对齐，每个子元素之间的间隔相等。（5）space-around：与主轴的两端对齐，每个子元素两侧的间隔相等。【示例3-10-5】重新编辑【示例3-10-2】<body>标签的内容，代码如下：width:700px; height:auto; border:2pxredsolid; display:flex; flex-flow:rownowrap; 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-itemsflex容器中的轴分为主轴和交叉轴。其中，主轴是使用flex-direction属性定义的轴；交叉轴是与主轴垂直的轴。align-items属性用于定义flex容器中的元素在交叉轴上的对齐方式。其语法格式为：align-items:flex-start|flex-end|center|baseline|stretch;（1）flex-start：与交叉轴的起点对齐。（2）flex-end：与交叉轴的终点对齐。（3）center：与交叉轴的中点对齐。（4）baseline：与元素的第一行文字的基线对齐。（5）stretch（默认值）：如果元素未设置高度或高度设为auto，元素将占满整个容器的高度。【示例3-10-6】将【示例3-10-5】<body>中的代码修改如下（各盒子高度和和文本行高不同）：<divid="main"> <divclass="box"style="height:70px;line-height:70px;">1</div> <divclass="box"style="height:30px;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;height:300px;border:2pxredsolid;display:flex;flex-direction:row;align-items:flex-start;【教师】ppt展示“align-items:flex-start应用效果“”align-items其他属性值应用效果“图片（详见教材），并讲解效果：flex-direction:row定义主轴为水平方向，起点在左端；align-items:flex-start定义元素为交叉轴起点对齐。3.10.6多轴线对齐align-contentalign-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。align-content:flex-start|flex-end|center|space-between|stretch|space-around;（1）flex-start：与交叉轴的起点对齐。（2）fl

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论