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

《HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案07 《使用盒子模型美化页面》.docx》由会员分享，可在线阅读，更多相关《HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案07 《使用盒子模型美化页面》.docx（11页珍藏版）》请在优知文库上搜索。

1、教案20-20学年第学期课程名称：授课教师：职称：开课部门：教案首页课程名称授课专业班级授课教师职称部门课程类型学位课公共必修保口公共选修课口专业必修课素质拓展必修课口专业选修课口素质拓展选修课非学位课公共必修课口公共选修课专业必修课口素版拓展必修课专业选修课口素质拓展选修课课程性质口理论口实践。理论+实践考核方式回考试口考查课程教学总学时数64学分35学情分析大年纪的学生首次正式接触WEB的相关概念，但是在之前的基础课程中学过，*(操作系统、计算机原理、Ifhon编程、,语言编程等相关专业方面基础知识，具备有一定的计算机操作能力，与基础应用知识：并且在日常中大量使用电脑与手机等计算机设备，其

2、中日常生活中也对于网页的使用更是颇多。但对于WEB方面的专业知识没有一个准确、完整的知识体系构建。教学方法谈论法、讲授法、演示法、练习法、抽取法教材名称(H1.K1.5KSS3b前端开发技术作者于丽娜出版社及出版时间人民邮电出版社2021.09弁考书目作者出版社及出版时间教研室意见教研室主任签字：年_一月一日注：表中口选项请打“J”每门课程只需填写一次本表.教案授课帙师班t学时6授课日期教学任务胃使用盒子模型美化页面授课方式Q讲授团实践授课地点团多媒体教室团实验/实训室口企业主要套考资科枚学PpT、做课、动画、思爰课程思政视频习题等导图教学目标素质日标：1.培养学生团队合作精神、用于探索的精神

3、:2 .培弊学生不断创新、精耕求精的工匠精神。知识目标，1.了解CSS中盒子模型的结构与特点:3 .了解窗子模型的长度计W：4 .解CSS中两种标准的盒子根里。能力目标：1,熟练使用盆子模型进行常规页而布局：5 .熟练使用盆子模型进行块状元素水平居中布局：6 .熟练加角边框的头像制作7 .察握边框阴影增加立体效果.教学内容1. CSS3文字样式2. CSS3文本样式&CSS3超陵接样式I.CSS3列表样式5. CSS3背景样式6. CSS3背景渐变样式M点魔点修学盅点:1. CSS3盒子模型结的2. CSS3余子模型长度计算3. CSS3怪异盒子模型1.CSS3盒子模型边框5. CSS3边框圆

4、角6. CSS3盒子阴影教学难点：1.CSS3怪异盒子模型教学方法谈论法、讲授法、瀚示法、练习法*材文本素材团实物展示（ZPPT幻灯片口音笏索材回视频素材EI动画素材图形，图像索材口网络资源口其他课后作业任务一：总结提升fE务二：能力进阶教学反思注：教案按授课次数填写,每次校深均应填写一份本衣.里攵班授课可不另填写教案，教学过程及内容注解(应包含注意事%课程思政点融入等一、导入斫课1的6分*】教师；盘子模型是CSS控制页面的一/Bf概念.是div布局页面的或要组成部分.本单元利介绍盒子模型的基率概念,通过设置盒子模型的边框、内边距和外边距.画角效果和盒子阴影效果等性，制作课程视频列表、美化用户

5、登录页面和用户注册页面,调整新云课堂项目内的视城列表，成长之路，课程列表等福分.通过团以合作、创新式的如合不同属性，探索获得见佳的页面展示效果的过程.冷望同学们要不断测试修改网页作品要有精券求精.再于探索的精裨.二、新知飒点、技能点讲解【的X分野】新课讲解h【约20分钟】教师；盒状模型是CSS中重要的概念.虽然CSS中没有盒状模型这个属性，但它却是CSS中无处不在的,i袋模型是由margin、border.Padding和Content几个屈性组合形成的。学生：什么是食子模型？为什么叫盒子模组？教师：CSS基础框食模型是CSS规范的一个模块,它定义了一种长方形的盒子一一包括它们各自的内边距(p

6、adding)与外边矩(margin),并根据视觉格式化模型来生成元素，对其进行布汽、编排、布局(Iayou1.),常核H译为盒子模型、禽模型或框模型，CSS盒子模型就是在网页设W中经常用到的CSS技术所使用的一种思维模型。由HTM1.元素可哄若作盒子，在CSS中，boxmode1.”这一术语是用来设计和布局时使用。CSS盆模型本质上是一个盒子，时装周困的HTM1.元素，它包括：外边距，边框，内边距和实际内容。盒模型允许我们在其它元素和周用元索边框之间的空间放批元素.(案例演示)新课讲斛2：【约20分钟】我师：盒子模里有以下4部分构成,上下边框颜色为#369左右边框颜色为做)00border-

7、co1.or:#369MXX);上边框颜色为#123左右边框颜色为#456F边框颜色为#789border-co1.or:M1.23#456#789属性说明bofdcr-top-wd1.h设立上边框粗细为5pxbordcr-topwidh:5px;bordcr-right-width设置右边根祖细为IOpxbordcr-right-width:IOpx;border-bottom-width设置下边框粗细为8pxbordcr-botom-width:8px;bonierJcI1.width设农左边也粗细为22pxbordcr-1.cft-width:22px;border-width四个边框粗

8、细都为5pxbwdefwid(h:5x;上、下边框粗细为20PX左、右边框粗细为2pxborder-w汕h:20px2px;上边框粗细为5px拉、右边框粗细为IPX下边根粗细为6pxborder-width:5pxIpx6px;上.右、下、左边柢机细分别为Ipx、3px、5px、2pxborder-width:Ipx3px5px2px;属性说明bordcr-top-sty1.c设置上边极为实线bordcrtopsty!c:so1.id:bordcr-right-sty1.c设置右边极为实妙bordcr-right-sty1.c:so1.id;bordcr-boctoder-righ1.设置右边

9、框粗细为SPX实战MDO颜色border-right:5pxso1.id#我)0：border-bottom设置下边框粗细为5px实线#f(X)颜色border-bottom:5xso1.idffftX);border-1.eft设置左边框粗细为5px实线#X)颜色border-1.eft:5pxSO1.idTOO:border设置所有的边框的样式SPX实妓#100border:5pxso1.idfff(X):属性说明margino设置上外近距margin-top:20px;margin-right设置右外边距margin-right：20px;mafinbouom设置下外边距nargin-b

10、oon:20px;magin-1.eft设S1.左外边距margin-1.eft:20px;margin设置上右下左四个边的外边距margin:20px:设置上下外边用为20px设置左右外边版为IOPXmargin:20pxIOpx;设置上外边距为IOPX设置左右外边柜为20px设过下外边距为30pxmargin:IOpx20px30px;设置上外边距为IoPX设置右外边距为20px设置卜外边柜为30px设置做外边作为40PXmargin:IOpx20px3（）px4f1.px;外边距有一个非常特殊的现象-外边距吞咻,当两个元素属干上卜相领时,如果有上方的元素的卜外边距与下方元素的上外边距接触

11、时.两个元素之间的距离并不足两个外边即之和.而是其两者中的矮大（ft.可以理解为在垂直方向上大的外边距吞噬了小的相邻外边距，注意这种情况只发生在垂直方向上。新课讲解4：【约15分钟】教师；盒子模型不仅仅能够实现简单的周国边距设定，还有一个更重的用途一一块状元索水平居中.我们来让一个图片出现在页面中的水平中间.实现方法很简单,只要满足如下条件即可：I.要水平居中的元素使块状元素或者被转换成的块状元素,2.需要设定左右边外边距同时为au1.。，UUu）表示自动适应空余空间,当两边都为自动适应是.会自动平分所在行内的空间,自然就形成了水平居中的效果.（案例演示）新课讲斛5：【约S分钟】教师：与外边儿

12、相时应，内边距（PaIk1.inQ,也叫做内填充区域,用于控肌内容与边框之间的如青，以便精确控制内容在盒子中的位附。内边距与外边距一样也分为上右右下四个方向的内边距.设置方式和设置联序也基本相同。新课讲斛6：【约30分钟】浏M内容区域（content）.是元素所包含的内容区域,以认情况下由所包含内容的大小来淡定内容区域的变高：也可以通过*dth、heigh榭性方式进行设Z1.指定内容区域的W.淄加了边框、内边踉和外边距后不会影响内容区域的尺寸，但是会增加盒子模里的总尺寸.盒子模型的尺寸对于页面布局十分兔要.我们对于盆子模型的计$*也十分史婴.在W3C标准盒子模型中，我们将包含外边及、边框、内边

13、框与内容的区域称作完整;ftR元素宽应对应内容宽度，由此我们有如下的公式；充整盒子的宜=左外边距+左动抬度度左内边距+元重宽度右内边距+右边播嵬度+右外边苑完整盒子的高=上外边电+上边隹宽度+上内边距+元素宽度+下内边距+下边框宽度+下外边距新课讲解7：【约30分科】教师：以上我们涉及到的盒子模型是W5C标准的盒子模型,但是在IE浏览器中并不是以标准盒子模型作为标准,而是如下方的IE自子模型：margintopborder-toppadding-topborder-bottom11urginbottomheightboaer1.eftPadd5gocontentpaddingbottomPadd三xrxzbordeTaghTmarg-ni.ghtwidth我们可以与W3C标准#子模型对比，IE盆子模型的区别在于是其元素宽度/高度并不是内容宽度/高度,而是内容宽度/裔度+左右/上下内边用+4：右，上下边框宽度。该模型并非旨在IE中