HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案08 《使用CSS3浮动布局页面》.docx

《HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案08 《使用CSS3浮动布局页面》.docx》由会员分享，可在线阅读，更多相关《HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案08 《使用CSS3浮动布局页面》.docx（10页珍藏版）》请在优知文库上搜索。

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

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

3、 培弊学生主动学习的能力,独立愚考、分析向逾、豺决何邈的能力。知识目标：1.了解disp1.ay的4种状态：3. 了解浮动的特点；4. r解如何清除浮动：5. T解浮动导致崩塌的解决方法及其优缺点.能力目标：1.熟练使用浮动的方式进行元素水平两隔布国或拧水平排列布局：6. 熟练解决由于浮动导致的结构崩圳掩.教学内容1. 标准文档流2. disp1.ay3. CSS3浮动I.CSS3清除浮动5.CSS3解决浮动导致的离侬塌陷.点魔点教学重点：1. CSS3浮动2. CSS3消除浮动3. CSS3解决浮动导致的而度塌陷教学难点：1. CSS3清除浮动2. CSS3解决浮动导致的高度塌陷做学方法谈论

4、法、讲授法、演示法、练习法索材S0文本素材团实物展示(ZPPT幻灯片口音笏素材回机频点材。动画发材图形/图像索材口刈络资源口其他课后作业任务一：总结提升任务二：能力进阶教学反思注：教案按授课次数埴写,每次按课均应填写一份本花.傲红期投课可不另填写教案.教学过程及内容注解（应包含注意事项、课程思政点融入等）一、导入斫课1的6分*】教师；使用DIV+CSS进行网贝布局,实际上是使用CSS排版网更元素，这是一种很新的排版理念,完全有别于传统的捧版习倾.根据页面期里的结构,使用div标签与CSS样式配合进行页面布同，使得这些div完成布局,设定的div标签作为容器，再取包费相应的内容元素这种方式就能有

5、效地进行内容与样式的分出.并且页面的布局不再受标签元素的欧认样式过多的影响“使用disp1.ay改变元素特性进行网页元素的排版,使用浮动排版网页元素.弁且根据M页布局诏要对浮动进行清除，通过多角度分析父元索高度塌陷的原因.带中同学们遇到困难或同意要认出分析，提升解决的向IS,最后讲解dip1.ay和t1.oa1.排总各自的优缺点,使大家能合理地在不同场合用不同的布局方式.二、著知识点、技能点饼解【的X分】新邨讲解1：【约20分钟】我师：科云课堂项目的开发中，要解决通用头部的左右布局，成长之跻的水平排列等效果也都需要用到浮动布附的方式来饼决.标准文档流是指元素根据块元素或行内元泰的特性按从上到下

6、，从左到右地方式自然排列,这也是元素景认的林列方式.我们在本学习单元之前的贞面内容均是在标准文档流下的排列结果.简单来说标准文档流的规则就是：从左至右、从上至下的短则.在前面的学习过程中，我们将IrrM1.的元素进行了分类，分为以div的代表的块状元素：以span为代表的内联元素。如果不更改其特性那么页面的效果自然会收到默认样式的影响,很雄做出精美的页面效果,CSS为我归提供了种改变其特性的方式disp1.ay属性.（窠例演示）新课讲解2：【约20分仲】教师：通过为dispkIy设定不同的属性俯，可以将元素的特性进行修改。这里CSS样式不仅提供基础的块状元素、内联元素特性,还为我们另外提供r内

7、联块状特性bnone特性.其中内联块状特性是既具有行内元素的在一行内从左向右排列的特性.也具有块兀素的UJ以指定元素宽高的特性；none的属性做，会让元素相当于被屏蔽掉，(U说明b1.ock块级元素的默认值，元素会被显示为块级兀素，该元素前后会带有换行符in1.ine行内元素的默认值，元素公被显示为行内元素,该元索前后没付换行符in1.ine-b1.ock行内块元素.元素既只仃行内元素的特性,也具有坎元素的特性none设况元家不会被显示新课讲解4：【约35分钟】教师，Hout属性定义元案在哪个方向浮动，以往这个属性总应用于图像.使文本用境在图像冏围.不过在CSS中任何元索都可以浮动.浮动元素会

8、生成一个块级框，而不论它本身是何种元素。案例演示实际上浮动是起初是为了页面中的图片使绯使实现类似Iwoo1.中的图片浮于文字的排版效果。如图。GoogIeChrome,又称MCT炮,是一个由GoogIe（谷默）公司开发的免费网页洒地-Chrome-是化学元量eW的英文名法；C1.去也用Chrox秣仔宽览就的外框.友次忤的坦式行是“于H世开St源代配:住所g.GgvbKit1.OMoziIU,目标是镇升蚓1.tftJj5,tt.并也名出；*肓茂依TT用者脚面.以杵的名称是察自于又称作-Chrome-的网络宽龙1形使用者界面（GUI）.Goo9IeChrome,又株右峨测宽1.建一个由GOOgIe

9、（谷VR）公司开发依免费网K浏览a.-Chronw-息化字元理-的英文名林：过去也用Chromef?旧创基朝外板.本软性的然*3于n蚣开放A代的怦所SUrS1.XWebKitfOMozi1.h,目林是提开物定佞、速度粕安全性，并利遭出置华且Ira王的使用者界面.蚊杵的名标自于又株作-Chtome-的向珞测把翁册和使用含再蛋（GUI）.GoogkChrome,又诈绒西宪*息一个国GoOgIG（谷/会V）公司开方的免财了心泡-Chrome-息化字元索ffi,的藁文名你：过去由网Chrcxne称净利!fi1.1.的外国.本收杵的程式码是曷于冥轮开Iir却代S3X杵所医与，WebKitWMozi1.h

10、,目际期8升电定性.速度IC安全住，并多温出IWmfJ线砌便用*里面.IX忤的名称息东自于又律作Xhcorrw-的网珞完艳H的形使阴密算盒（GUI）.我们如何理解这种浮动效果呢？我In可以看到再默认的标准文档流中.所行的布问行的内联元素是默认以底边对齐,而我们对图片进行浮动之后，图片脱了标准文档流，按照优先锹左或者优先靠右的顿序悬浮在之前的文档流之上,与相邻的文本内容产生r球会,而如果Ift段的区域外内联元素（如文字）.则内联元素则会自动躯避浮动的莫登区域.继续按照标准文档流的从左到右，从上到卜的方式排列.经验分享：并且浮动的元索会有一个收缩捋性,当被浮动的元素没有指定宽高时.其浮动后的宽高由

11、其所包含的内容宽高决定.新课讲解5：【约35分件】教师:CSS中C1.ear版性规定元素的哪侧不允许其他浮动元素，官方解群为“元素盒子的边不能和前面的浮动元泰相邻，设置了c1.ear的元素只能通过调整自身来使自己不要和浮动元素排列在一起.d2width:200p;height:20p;background-co1.or:#0066CC;f1.oat:1.eft;)我们给页面中的#fatherJC杀手动指定高度值300px.则可以避免出现崩塌,但是需要根据内容的高度去收手动计舞，不能灵活适的页面内容S方式2：我们从千元本脱离文本范的问题入手，我们不能真接让浮动的子元素对父元素产生影响.但我们可以

12、通过消除浮动的方式让浮动元素对其他的千元素产生影响.即在最后的浮动元素之下添加一个高度为0的块状元素,并让该新增元素对浮动元素进行浮动消除处理，这样相当于得到了一个浮动元素未浮动前卜方紧邻的一个下边框进行占位,从而也能有效地推开父元素高度.示例图8-11代码清除浮动/tit1.e)Wfatherwidth:65p;border:5pso1.id#000000;,d1.width:10p;height:100p;background-co1.or:#008000;f1.oat:right;)d2(width:2p;height:2;background-co1.or:#0066CC;f1.oat

13、:1.eft;)这种方式可有有效的解决父元素高度堀陷问题，而且也能自动根据浮动儿东的高度而喝整.但是唯一缺点就是在htm1.中增加了没右实际内容含义的元索，违背“内容与样式分热”的原则，方法3：根据方法2的思路进行了优化，这担我的优化手动添加块状元我为自动追加块状元素,这样在源码的角度下,解决无内容意义的元素问-我们借助CSS的伪元案after选择零.代码清除浮动八it1.eSfatherwidth:65p;border:5pso1.id#000000;)/*逋过after伪元或徐父兀去坡祷流加一个元素并没定元素内容为宽块状元素清除两施浮动VRfatherjafter(content:disp1.ay:b1.ock;c1.ear:both;)d1.width:100px;height:10;background-co1.or:#008000;f1.oat:right;)d2