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

下载本文档

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

文档简介

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

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

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题什么是CSS盒子模型？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知

（38min）3.8CSS盒子模型【教师】讲解CSS盒子模型的宽和高、边框、内外边距等内容盒子模型就是把HTML页面中的元素（特别是块状元素）看作是一个矩形的盒子，也就是一个盛装内容的容器。在浏览网页时，可以看到大部分网页的内容都是按照区域划分的，即由若干个盒子按照一定的秩序排列组成。在网页中，一个区域的大小由几个部分构成，包括元素内容content，元素内边距padding，元素边框border，元素外边距margin四个部分。……（详见教材）3.8.1盒子的宽和高【课堂互动】✈【教师】提问CSS盒子的宽和高分别由什么属性表示？✈【学生】聆听、思考、回答在CSS中，内容区域的宽度和高度分别用width和height属性表示。width和height属性的值可以使用不同的单位或使用父元素的百分比，在实际开发中常用像素做单位。【示例3-8-1】编辑HTML文档<body>标签的内容，代码如下：<divid="box"></div>在HTML文档<style>标签内写入CSS选择器：#box{width:200px;height:110px;background:red;}效果：使用width和height属性分别设置红色盒子#box的宽为200px、高为110px。【示例3-8-2】编辑HTML文档<body>标签的内容，代码如下：<divid="box"> <divid="son"></div></div>在HTML文档<style>标签内写入CSS选择器：#box{width:200px; height:100px; background:red;}#son{height:20%; background:#0000FF;}【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“子元素的宽和高”图片（详见教材），并讲解效果：相比【示例3-8-1】，外层盒子#box的样式不变，在其中嵌套一个蓝色盒子#son。子元素“#son”没有设置宽度，默认情况下占其父元素的100%；高度设为父元素的20%。3.8.2盒子的边框border在CSS中，常用的边框样式属性有边框样式border-style、边框宽度border-width、边框颜色border-color、单边框的属性及边框样式的综合设置，具体如表3-8-1所示（详见教材）。1.综合设置【课堂互动】✈【教师】提问什么是综合设置？✈【学生】聆听、思考、回答是指同时为盒子模型的四个边框定义相同的宽度、样式和颜色。其语法格式如下：border:边框宽度边框样式边框颜色;【示例3-8-3】编辑HTML文档<body>标签的内容，代码如下：<divid="box"></div>在HTML文档<style>标签内写入CSS选择器：#box{width:100px; height:100px; background:blue; border:10pxsolid#B91720;}效果：盒子宽度为100px，高度为100px，背景颜色为蓝色，边框为10px、实心线、酒红色。2.单方向设置是指同时定义盒子模型一个方向的边框宽度、样式和颜色。【示例3-8-4】将【示例3-8-3】中的border属性替换为：border-left：5pxdashedpink；【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“单方向设置边框效果”图片（详见教材），并讲解效果：3.全方位单属性设置是指按属性为盒子模型的四个边框同时定义相同的宽度、样式和颜色。【示例3-8-5】将【示例3-8-3】中的border-left属性替换为：border-width:10px;border-style:solid;border-color:#B91720;效果：完全等同于【示例3-8-3】。4.单属性顺时针设置【示例3-8-6】将【示例3-8-3】中的border-left属性替换为：border-width:5px10px15px20px;border-style:soliddasheddotteddouble;border-color:blackpinkredyellow;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“单属性设置边框效果”图片（详见教材），并讲解效果：从上到左顺时针方向边框宽度依次为5px、10px、15px、20px；边框样式依次为实心线、虚线、点线、双线；边框颜色依次为黑色、粉色、红色、黄色。3.8.3盒子的外边距margin✈【多媒体】组织学生扫码播放“盒子的外边距margin”视频（详见教材），让学生对这部分内容有一个大致地了解网页是由多个盒子排列组成的，为了合理地布局网页，盒子与盒子之间需要设置一定的间距，这个间距称为外边距，用margin属性表示。外边距属性同边框属性一样，是复合属性，各个方向的外边距属性如下：（1）上侧外边距：margin-top。（2）右侧外边距：margin-right。（3）下侧外边距：margin-bottom。（4）左侧外边距：margin-left。margin属性的值包括自定义外边距（常以像素为单位）、使用父元素的百分比和inherit（从父元素继承）等。【课堂互动】✈【教师】提问使用margin属性时，主要有哪些情况？✈【学生】聆听、思考、回答1.四个参数所定义的值依次为上、右、下、左四个方向的外边距，即顺时针原理。【示例3-8-7】编辑HTML文档<body>标签的内容，代码如下：<divid="box1"></div><divid="box2"></div>在HTML文档<style>标签内写入CSS选择器：#box1,#box2{ width:200px; height:110px; border-style:solid;}#box2{margin:10px5px15px20px;}效果：第2个盒子的上、右、下、左外2.三个参数所定义参数依次代表上、左右、下方向的外边距。【示例3-8-8】将【示例3-8-7】中的margin属性替换为：margin:10px5px15px;效果：3.两个参数所定义参数依次代表上下、左右方向的外边距。【示例3-8-9】将【示例3-8-7】中的margin属性替换为：margin:10px5px;效果：第2个盒子的上下外边距为10px，左右外边距为5px，优先向左靠。4.一个参数上下左右外边距同为一个值。【示例3-8-10】将【示例3-8-7】中的margin属性替换为：margin:10px;效果：第2个盒子的上下左右外边距均为10px，优先向左靠。5.单方向定义单独定义一个方向的外边距。【示例3-8-11】将【示例3-8-7】中的margin属性替换为：margin-top:20px;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“设置上外边距的前后效果”图片（详见教材），并讲解效果：第2个盒子的上外边距为20px。6.特殊用法将左右外边距设置为auto时，可实现相对于父元素盒子水平居中，实际开发中常用这种方法进行网页布局。【示例3-8-12】将【示例3-8-7】中的margin属性替换为：margin:10pxauto;效果：第2个盒子的上下外边距为10px，左右外边距相等，相对于父元素水平居中。7.CSS外边距合并两个垂直外边距相遇时，将取二者之间较大的值形成一个外边距，合并后的效果如图3-8-9所示。【教师】ppt展示图片“外边距合并示意图”（详见教材），并讲解可以总结出，margin的使用遵循“上为起点，顺时针方向，缺省对角覆盖”的规章。即，当设置margin属性时，各参数的起点值为上侧外边距。如果参数为4个，按照顺时针方向依次设置；如果参数不足4个，缺省的参数由对角位置参数设置。在CSS中，很多属性设置都符合该用法，如边框属性。3.8.4盒子的内边距padding【教师】讲解CSS盒子的内边距padding✈【多媒体】组织学生扫码播放“盒子的内边距padding”视频（详见教材），让学生对这部分内容有一个大致地了解内边距是指元素内容与边框之间的距离，用padding属性表示。内边距也可分为：（1）上侧内边距：padding-top。（2）右侧内边距：padding-right。（3）下侧内边距：padding-bottom。（4）左侧内边距：padding-left。padding属性的值及使用规则与margin属性相同，主要有以下几种情况。1.四个参数所定义的值依次为上、右、下、左四个方向的内边距。【示例3-8-13】编辑HTML文档<body>标签的内容，代码如下：<divid="box">生活最沉重的负担不是工作，而是无聊。假如生活欺骗了你，不要忧郁，也不要愤慨！不顺心的时候暂且容忍，相信快乐的日子就会到来。</div>在HTML文档<style>标签内写入CSS选择器：#box{width:300px; height:auto; border:1pxsolid#B91720; padding:12px5px15px20px;}【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“内边距设置效果”图片（详见教材），并讲解效果：内边距上为12px，右为5px，下为15px，左为20px，内容优先向左靠。2.三个参数所定义的值依次为上、右、下、左四个方向的内边距。【示例3-8-14】将【示例3-8-13】中的padding属性替换为：padding:10px5px15px;效果：内边距上为10px，左右为5px，下为15px，内容优先向左靠。3.两个参数所定义的值依次为上、右、下、左四个方向的内边距。【示例3-8-15】将【示例3-8-13】中的padding属性替换为：padding:10px5px;效果：内边距上下为10px，左右为5px，内容优先向左靠。4.一个参数上下左右内边距同为一个值。【示例3-8-16】将【示例3-8-13】中的padding属性替换为：padding:10px;效果：内边距上下左右均为10px，内容优先向左靠。5.单独定义上下左右内边距同为一个值。【示例3-8-17】将【示例3-8-13】中的padding属性替换为：padding-left:10px;效果：左内边距为10px。【提示】padding和margin的用法有一处不同，在padding中使用auto属性值无法实现内容相对于盒子模型水平居中的效果。【学生】聆听、记录、理解通过教师讲解、课堂互动、演示操作等方式，使学生了解CSS盒子模型的宽和高、边框、内外边距等相关属性的使用方法第二节课问题导入（3min）【教师】提出以下问题除了所讲内容外，盒子模型还有哪些属性？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知

（27min）3.8CSS盒子模型【教师】讲解CSS盒子模型的背景、尺寸计算方法、阴影和圆角属性等内容3.8.5盒子的背景background✈【多媒体】组织学生扫码播放“盒子的背景background”视频（详见教材），让学生对这部分内容有一个大致地了解【课堂互动】✈【教师】提问背景主要包括哪些属性？✈【学生】聆听、思考、回答1.背景颜色background-color在CSS中，网页元素的背景颜色用background-color属性来设置。【示例3-8-18】编辑HTML文档<body>标签的内容，代码如下：<divclass="box"></div>在HTML文档<style>标签内写入CSS选择器：.box{width:100px; height:100px; background-color:#008000;}效果：为box盒子设置了绿色背景（#008000）。2.背景图像background-image【课堂互动】✈【教师】提问background-image属性有什么作用？其属性值有哪些？✈【学生】聆听、思考、回答属性名称：background-image。属性的值：url(图片地址)|none，其中none为默认值，即无背景图片。属性作用：为指定选择器加载指定背景图片。【示例3-8-19】编辑HTML文档<body>标签的内容，代码如下：<divid="box"></div>在HTML文档<style>标签内写入CSS选择器：#box{width:1280px; height:800px; background-image:url(img/beijing1.jpg);}【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“背景图像设置效果”图片（详见教材），并讲解效果：在宽度为1280px，高度为800px的盒子中载入等大的背景图像“beijing1.jpg”。3.背景图像平铺方式background-repeat属性名称：background-repeat。属性的值：no-repeat（背景图像不重复）；repeat-x（背景图像在水平方向重复平铺）；repeat-y（背景图像在垂直方向重复平铺）；repeat（背景图像在水平和垂直方向都重复平铺）。属性作用：当背景图像小于盒子尺寸时控制图像在盒子内的平铺方式。【示例3-8-20】将【示例3-8-19】的#box声明编辑如下：#box{width:772px; height:300px; background-color:pink; background-image:url(img/icon.jpg); background-repeat:repeat-x;}效果：图像icon.jpg在水平方向重复五次，占满了width（772

px）空间；垂直方向不重复。4.背景图像定位background-position【课堂互动】✈【教师】提问background-position的属性值有哪些？其属性作用是什么？✈【学生】聆听、思考、回答属性名称：background-position。属性的值：水平偏移距离垂直偏移距离。属性作用：设置背景图像偏移位置。默认背景图像的左上角点与盒子模型的左上角点重合。【示例3-8-21】在网页上显示图3-8-14所示背景图像icons.jpg中的第二行第二个图标。将【示例3-8-19】的#box声明编辑如下：#box{width:115px; height:115px; background-image:url(img/icons.jpg); background-position:-115px-115px;}【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“背景图像定位效果”图片（详见教材），并讲解效果：box盒子的宽度为115px、高度为115px；背景图像为icons.jpg；背景图像向左移动115px、向上移动115px。【提示】CSS中，background-position的属性值表示背景图像的坐标，可以使用多种描述方式：（1）使用以长度为单位的数值，最常用的单位是px。（2）使用表示方位的关键词，包括lefttop、leftcenter、leftbottom、righttop、rightcenter、rightbottom、centertop、centercenter、centerbottom。……（详见教材）5.背景图像固定background-attachment当网页页面较长时，如果希望背景图像不要随着滚动条移动，此时需要固定背景图像。属性名称：background-attachment。属性的值：fixed（固定）；scroll（滚动）。【示例3-8-22】编辑【示例3-8-19】中的body和#box选择器，代码如下：body{background-image:url(img/bj.jpg); background-repeat:no-repeat; background-position:30px90px; background-attachment:fixed;}#box{width:300px;height:2000px;}效果：设置背景图像的位置固定，不随着滚动条移动而移动。6.多背景图像CSS可以通过background-image属性为一个元素添加多幅背景图像。不同的背景图像地址用逗号隔开，显示时图像会彼此堆叠，其中第一幅图像堆叠在最上层。【示例3-8-23】编辑HTML文档<body>标签的内容，代码如下：<h1>多重背景</h1><p>下面的div元素有两幅背景图像：</p><divid="example1"> <h1>欢迎大家学习css样式</h1>……（详见教材）在HTML文档<style>标签内写入CSS选择器：#example1{ background-image:url(img/flower.jpg),url(img/paper.jpg); background-position:rightbottom,lefttop; background-repeat:no-repeat,repeat; padding:15px;}【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“多重背景属性设置效果”图片（详见教材），并讲解效果：#example1有两幅背景图像，第一幅背景图像是花朵，堆叠在第二幅背景图像上方，与元素的右下角对齐，不重复；第二幅背景图像是纸张背景，与元素的左上角对齐，且重复平铺。7.综合设置背景属性利用background属性可以综合设置元素的背景样式，语法如下：background:背景色url(背景图)平铺定位固定;属性值的位置可以调换，不需要设置的属性可以省略。例如，【示例3-8-22】的body选择器可以换成以下代码：body{background:url(images/bj.jpg)no-repeat30px90pxfixed;}3.8.6盒子尺寸的计算方式box-sizing✈【多媒体】组织学生扫码播放“盒子尺寸的计算方式box-sizing”视频（详见教材），让学生对这部分内容有一个大致地了解在CSS3中，可以通过box-sizing属性来设置计算盒子尺寸的方式。box-sizing属性包括两个值：content-box和border-box。（1）content-box为默认的属性值。此时，盒子在网页所占的总宽度为width属性的值、左右内边距的值和左右边框宽度的值的总和；所占总高度为height属性的值、上下内边距的值和上下边框宽度的值的总和。（2）border-box为包含边框的盒子尺寸计算方法。此时，盒子在网页中所占的总宽度就是样式表中设置的width属性值；所占总高度就是样式表中设置的height属性值。【示例3-8-24】编辑HTML文档<body>标签的内容，代码如下：<divid="box"></div>在HTML文档<style>标签内写入CSS选择器：#box{width:150px; height:110px; background:blue; padding:30px; border:20pxsolidred; box-sizing:border-box;}效果：声明删掉，效果为整个盒子宽度为250px，高度为210px。3.8.7盒子的阴影box-shadow【课堂互动】✈【教师】提问阴影属性有哪些属性值？✈【学生】聆听、思考、回答属性名称：box-shadow。属性的值：水平偏移、垂直偏移、深度偏移、阴影颜色依次书写，各属性值之间用空格隔开。属性作用：设置盒子边框阴影的水平偏移、垂直偏移、深度偏移和阴影的颜色。【示例3-8-25】在【示例3-8-24】中重新写入CSS选择器：#box{width:150px; height:100px; background:blue; box-shadow:10px20px30px#888;}效果：宽度为150px、高度为100px、背景为蓝色的盒子，其阴影向右偏移10px、向下偏移20px、垂直页面往里方向偏移30px，颜色为#888（灰色）。3.8.8圆角属性border-radius属性名称：border-radius。属性的值：圆角半径大小具体值（通常以px为单位）或百分比；可以是一个参数、两个参数、三个参数、四个参数。属性作用：设置盒子各个角的圆角半径。【示例3-8-26】将【示例3-8-25】中的box-shadow声明替换为：border-radius:50%;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“统一设置圆角效果”图片（详见教材），并讲解效果：生成4个圆角

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

温馨提示

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

最新文档

评论

0/150

提交评论