HTML5 CSS3Web前端开发技术（任务式）（微课版）（于丽娜第2版） 教案07 《使用盒子模型美化页面》

《》教案20-20学年第学期课程名称：授课教师：职称：开课部门：年月日

《》教案首页课程名称授课专业班级授课教师职称部门课程类型学位课□公共必修课□专业必修课□素质拓展必修课□公共选修课□专业选修课□素质拓展选修课非学位课□公共必修课专业必修课□素质拓展必修课□公共选修课□专业选修课□素质拓展选修课课程性质□理论□实践理论+实践考核方式考试□考查课程教学总学时数64学分3.5学情分析大*年级的学生首次正式接触WEB的相关概念，但是在之前的基础课程中学过***（操作系统、计算机原理、Python编程、C语言编程）等相关专业方面基础知识，具备有一定的计算机操作能力，与基础应用知识；并且在日常中大量使用电脑与手机等计算机设备，其中日常生活中也对于网页的使用更是颇多。但对于WEB方面的专业知识没有一个准确、完整的知识体系构建。教学方法谈论法、讲授法、演示法、练习法、抽象法教材名称《HTML5+CSS3Web前端开发技术》作者于丽娜出版社及出版时间人民邮电出版社2021.09参考书目作者出版社及出版时间教研室意见教研室主任签字：年月日注：表中□选项请打“√”。每门课程只需填写一次本表。

《》教案授课教师班级学时6授课日期教学任务《使用盒子模型美化页面》授课方式讲授实践授课地点多媒体教室实验/实训室□企业主要参考资料教学PPT、微课、动画、思维导图课程思政视频习题等教学目标素质目标：1.培养学生团队合作精神、用于探索的精神；2.培养学生不断创新、精益求精的工匠精神。知识目标：1.了解CSS中盒子模型的结构与特点；2.了解盒子模型的长度计算；3.了解CSS中两种标准的盒子模型。能力目标：1.熟练使用盒子模型进行常规页面布局；2.熟练使用盒子模型进行块状元素水平居中布局；3.熟练圆角边框的头像制作4.掌握边框阴影增加立体效果。教学内容CSS3文字样式CSS3文本样式CSS3超链接样式CSS3列表样式CSS3背景样式CSS3背景渐变样式重点难点教学重点：CSS3盒子模型结构CSS3盒子模型长度计算CSS3怪异盒子模型CSS3盒子模型边框CSS3边框圆角CSS3盒子阴影教学难点：CSS3怪异盒子模型教学方法谈论法、讲授法、演示法、练习法素材资源R文本素材R实物展示RPPT幻灯片□音频素材R视频素材R动画素材R图形/图像素材□网络资源□其他课后作业任务一：总结提升任务二：能力进阶教学反思注：教案按授课次数填写，每次授课均应填写一份本表。重复班授课可不另填写教案。 

教学过程及内容一、导入新课【约5分钟】教师：盒子模型是CSS控制页面的一个重要概念，是div布局页面的重要组成部分。本单元将介绍盒子模型的基本概念，通过设置盒子模型的边框、内边距和外边距，圆角效果和盒子阴影效果等属性，制作课程视频列表、美化用户登录页面和用户注册页面，调整新云课堂项目内的视频列表，成长之路，课程列表等部分。通过团队合作、创新式的组合不同属性，探索获得最佳的页面展示效果的过程。希望同学们要不断测试修改网页作品，要有精益求精，勇于探索的精神。二、新知识点、技能点讲解【约x分钟】新课讲解1：【约20分钟】教师：盒状模型是CSS中重要的概念。虽然CSS中没有盒状模型这个属性，但它却是CSS中无处不在的，盒装模型是由margin、border、padding和content几个属性组合形成的。......学生：什么是盒子模型？为什么叫盒子模型？教师：CSS基础框盒模型是CSS规范的一个模块，它定义了一种长方形的盒子——包括它们各自的内边距（padding）与外边距（margin），并根据视觉格式化模型来生成元素，对其进行布置、编排、布局（layout）。常被直译为盒子模型、盒模型或框模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。所有HTML元素可以看作盒子，在CSS中，"boxmodel"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距，边框，内边距和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。......(案例演示)新课讲解2：【约20分钟】教师：盒子模型有以下4部分构成。图7-1W3C标准盒子模型content：位于最中间，网页的主要显示内容。border：位于内边距外面，如果没有内边距就是包含着内容的外框。它一般具有一定的厚度。padding：位于边框内部的空隙，是内容与边框的距离，也叫做填充。margin：位于边框外部空隙，边框外面周围的距离，通常是与其他元素的外边距的距离。新课讲解3：【约45分钟】教师：边框（border）有三个属性，分别是color（颜色）、width（粗细）和style（样式）。网页中设置边框样式时，常常需要将这三个属性很好地配合起来，才能达到良好的页面效果。在使用CSS设置边框的时候，分别使用border-color、border-width、和border-style设置边框的颜色、粗细和样式。border—color的设置方法与文本的color属性或背景颜色background-color属性的设置方法完全一样，也是使用十六进制设置边框的颜色，如红色为#FF0000，也可以使用RGBA的颜色表示方法。属性说明border-top-color设置上边框颜色border-top-color:#f00;border-right-color设置右边框颜色border-right-color:#f00;border-bottom-color设置下边框颜色border-bottom-color:#f00;border-left-color设置左边框颜色border-left-color:#f00;border-color设置四个边框为同一颜色border-color:#EEFF00;上下边框颜色为#369左右边框颜色为#000border-color:#369#000;上边框颜色为#123左右边框颜色为#456下边框颜色为#789border-color:#123#456#789属性说明border-top-width设置上边框粗细为5pxborder-top-width:5px;border-right-width设置右边框粗细为10pxborder-right-width:10px;border-bottom-width设置下边框粗细为8pxborder-bottom-width:8px;border-left-width设置左边框粗细为22pxborder-left-width:22px;border-width四个边框粗细都为5pxborder-width:5px;上、下边框粗细为20px左、右边框粗细为2pxborder-width:20px2px;上边框粗细为5px左、右边框粗细为1px下边框粗细为6pxborder-width:5px1px6px;上、右、下、左边框粗细分别为1px、3px、5px、2pxborder-width:1px3px5px2px;属性说明border-top-style设置上边框为实线border-top-style:solid;border-right-style设置右边框为实线border-right-style:solid;border-bottom-style设置下边框为实线border-bottom-style:solid;border-left-style设置左边框为实线border-left-style:solid;border-style设置四个边框均为实线border-style:solid;上、下边框为实线左、右边框为点线border-style:soliddotted;上边框为实线左、右边框为点线下边框为虚线border-style:soliddotteddashed;上、右、下、左边框分别为border-style:soliddotteddasheddouble;实线、点线、虚线、双线属性说明border-top设置上边框粗细为5px实线#f00颜色border-top:5pxsolid#f00;border-right设置右边框粗细为5px实线#f00颜色border-right:5pxsolid#f00;border-bottom设置下边框粗细为5px实线#f00颜色border-bottom:5pxsolid#f00;border-left设置左边框粗细为5px实线#f00颜色border-left:5pxsolid#f00;border设置所有的边框的样式5px实线#f00border:5pxsolid#f00;属性说明margin-top设置上外边距margin-top:20px;margin-right设置右外边距margin-right:20px;margin-bottom设置下外边距margin-bottom:20px;margin-left设置左外边距margin-left:20px;margin设置上右下左四个边的外边距margin:20px;设置上下外边距为20px设置左右外边距为10pxmargin:20px10px;设置上外边距为10px设置左右外边距为20px设置下外边距为30pxmargin:10px20px30px;设置上外边距为10px设置右外边距为20px设置下外边距为30px设置做外边距为40pxmargin:10px20px30px40px;外边距有一个非常特殊的现象------外边距吞噬。当两个元素属于上下相邻时，如果有上方的元素的下外边距与下方元素的上外边距接触时，两个元素之间的距离并不是两个外边距之和，而是其两者中的最大值。可以理解为在垂直方向上大的外边距吞噬了小的相邻外边距，注意这种情况只发生在垂直方向上。新课讲解4：【约15分钟】教师：盒子模型不仅仅能够实现简单的周围边距设定，还有一个更重的用途------块状元素水平居中。我们来让一个图片出现在页面中的水平中间。实现方法很简单，只要满足如下条件即可：1.要水平居中的元素使块状元素或者被转换成的块状元素。2.需要设定左右边外边距同时为auto，auto表示自动适应空余空间，当两边都为自动适应是，会自动平分所在行内的空间，自然就形成了水平居中的效果。（案例演示）新课讲解5：【约5分钟】教师：与外边距相对应，内边距(padding)，也叫做内填充区域，用于控制内容与边框之间的距离，以便精确控制内容在盒子中的位置。内边距与外边距一样也分为上右左下四个方向的内边距，设置方式和设置顺序也基本相同。新课讲解6：【约30分钟】教师：内容区域（content），是元素所包含的内容区域，默认情况下由所包含内容的大小来决定内容区域的宽高；也可以通过width、height属性方式进行设置，指定内容区域的宽高。增加了边框、内边距和外边距后不会影响内容区域的尺寸，但是会增加盒子模型的总尺寸。盒子模型的尺寸对于页面布局十分重要，我们对于盒子模型的计算也十分重要。在W3C标准盒子模型中，我们将包含外边距、边框、内边框与内容的区域称作完整盒子，元素宽度对应内容宽度。由此我们有如下的公式：完整盒子的宽=左外边距+左边框宽度+左内边距+元素宽度+右内边距+右边框宽度+右外边距完整盒子的高=上外边距+上边框宽度+上内边距+元素宽度+下内边距+下边框宽度+下外边距新课讲解7：【约30分钟】教师：以上我们涉及到的盒子模型是W3C标准的盒子模型，但是在IE浏览器中并不是以标准盒子模型作为标准，而是如下方的IE盒子模型：我们可以与W3C标准盒子模型对比，IE盒子模型的区别在于是其元素宽度/高度并不是内容宽度/高度，而是内容宽度/高度+左右/上下内边距+左右/上下边框宽度。该模型并非旨在IE中存在，在同chrome内核的浏览器中，也可通过设定box-sizing属性进行更改，从而是指定元素的盒子模型从W3C标准盒子模型转换到IE盒子模型。box-sizing设定元素为W3C标准盒子模型再除IE浏览器的的主流浏览器中为默认值content-box;设定元素为IE盒子模型border-box;IE盒子模型的尺寸计算公式如下：IE盒子模型完整的宽=左外边距+元素宽度+右外边距元素宽度=左边框宽度+左内边距+内容宽度+右内边距+右边框宽度IE盒子模型完整的高=上外边距+元素高度+下外边距元素高度=上边框宽度+上内边距+内容高度+下内边距+下边框宽度新课讲解8：【约30分钟】教师：在页面中有盒子模型构成的相邻边框的夹角默认是直角，千篇一律。为了改善这种单调的样式，在之前的开发过程中是通过引入图片内容为包含圆角的图片，来表现非直角边框。但是随之而来的问题就是，提供的图片不一定与实际的元素大小匹配，需要使用作图工具根据使用情况进行调整不能灵活适应页面，引用图片而且会造成网络资源的浪费。所以CSS3标准中，提出一个圆角属性borderr-radius，专门来解决以上问题。利用border-radius属性除了可以实现元素的圆角效果外，也可以制作一些特殊的图形效果，如圆形、半圆形、扇形等。（案例演示）学生：跟做新课讲解9：【约30分钟】教师：盒子阴影，box-shadow也是CSS3新增的一个重要属性，用来定义元素的盒子阴影，下面就详细地介绍box-shadow属性及其使用。其语法构成如下：box-shadow阴影类型，可选值，如果不设置，默认的投影方式是外阴影；如果设置了inset表示是内阴影。x-offsetx轴位移，用来指定阴影水平位移量，其值可以