HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案11 《使用CSS3弹性盒子布局页面》.docx
教案20-20学年第学期课程名称：授课教师：职称：开课部门：年月曰教案首页课程名称授课专业班级授课教师职称部门课程类型学位课公共必修保口公共选修课口专业必修课素质拓展必修课口专业选修课口素质拓展选修课非学位课公共必修课口公共选修课专业必修课口素版拓展必修课专业选修课口素质拓展选修课课程性质口理论口实践。理论+实践考核方式回考试口考查课程教学总学时数64学分35学情分析大年纪的学生首次正式接触WEB的相关概念，但是在之前的基础课程中学过，*(操作系统、计算机原理、Ifhon编程、,语言编程等相关专业方面基础知识，具备有一定的计算机操作能力，与基础应用知识：并且在日常中大量使用电脑与手机等计算机设备，其中日常生活中也对于网页的使用更是颇多。但对于WEB方面的专业知识没有一个准确、完整的知识体系构建。教学方法谈论法、讲授法、演示法、练习法、抽取法教材名称(H1.K1.5KSS3'b前端开发技术作者于丽娜出版社及出版时间人民邮电出版社2021.09弁考书目作者出版社及出版时间教研室意见教研室主任签字：年_一月一日注：表中口选项请打“J”每门课程只需填写一次本表.教案授课帙师班t学时6授课日期教学任务£使用。553弹性盒子布局页面&授课方式Q讲授团实践授课地点团多媒体教室团实验/实训室口企业主要套考资科枚学PpT、做课、动画、思爰课程思政视频习题等导图教学目标素质目标：1,培养学生的时间政见；2.培养学生的职业素养意识：3.培养学生与本专业发展相适应的劳动素养.知设目标：I.了解弹性盒子的特点与优势:2.掌握抨性布局.能力目标：1.掌握使用弹性布局替换浮动布局：2.熟练使用弹性盒子布局.教学内容1. CSS3弹性盒子结构2. CSS3弹性盒子主轴方向3. CSS3弹性盘子主轴对齐方式I.CSS3弹性盒子交叉轴对齐方式5.弹性盒子优势*点难点教学里点：1. CSS3弹性盒子结构2. CSS3弹性盒子主轴方向3. CSS3带性盒子主粕而齐方式1.CSS3弹性盒子交叉轴对齐方式教学难点：1. CSS3弹性盒子主轴对齐方式2. CSS3弹性盒子交叉轴时齐方式教学方法谈论法、讲授法、演示法、练习法素材ft*文本素材0实物展示EPFI-幻灯片口音频素材0视频素材0动画素材图形/图像素材口网络资源口其他课后作业任务一：总结提升任务二：能力进阶教学反思注：教案按授课次数埴耳，耳次授课均应填写份本衣.很父班授课可不另填写教案，教学过程及内容向与主轴垂直.三个项目首先按照主轴方向进行排列，即从左向右水平排列：之后再在每个项目所在的纵轴方向进行对齐.就认项目玳近主轴-侧对齐井垂直完全填充.这里由于项目已经默认设定了宽高，谀定1.度致使项目在交叉轴上仅舔近主轴对齐，而没有进行拉伸填充。新课讲解3：【约15分仲】教师，弹性盒子容渊行以下6种属性：nexYire1.ion属性决定主轴的方向即项目的排列方向.row（默认值）：主轴为水平方向，起点在容器左上角，终点点在右上角，方向向右.row-rcvenie：主轴为水平方向，起点在灯上角，终点点在右上角，方向向左.co1.umn：主轴为乖直方向，起点在容器左上角，终点点在左下角，方向向方CO1.Umn-reverse：主轴为垂点方向，起点在容器左下角,终点点在左上角,方向向上,分别在上面的基础案例的css代码的.f1.exYontainer样式中.添加1.1.cx-<1.ircction:row|row-rcverxc|co1.umn|co1.umn-rcvcrsc-f1.exitem1f1.exitem2f1.exitemi交叉It1.f1.¢xdirectionrowf1.exitem3f1.exitem2f1.exdirectk>n:row-rever5ek1.exitem1f1.exitem21.exitem3主知f1.e×*direction:co1.umnHexitem3f1.exitem2f1.e.(firectio11co1.umn-reverse这里我们把主轴看作是沿着当匕边沿和左边沿的一条有方向的线.交叉轴则是垂直于主轴的，交叉轴的方向并不JR要，可以看作是双向的.ex-wrap属性决定IkX容器是敢行或者多行，同时横轴的方向决定了科行推强的方向，产生的新行与已有的行会平分交叉轴上的控件。nowrap（默认）:不换行.如果项目总长超过不需.则项目在主轴方向上进行平均压缩.wrap；可以换行，新行在远掰主轴一侧产生.WmP-reverse：可以换行.新行在兜近主轴一侧产生。新课讲解4：【约45分钟】教师：这里我们把主轴看作是沿岩容器上边沿和左边沿的一条有方向的线，交叉粕则是垂JTF主轴的，交叉轴的方向并不至要，可以看作是双向的。ex-wrap/性决定f1.ex容器是单行或者多行，同时横轴的方向决定了新行堆登的方向.产生的新行与已有的行会平分交叉轴上的控件.nowrap（默认）：不换行.如果项目总长超过容器,则项目在主轴方向上进行平均压缩，wrap：可以操行，新行在远离主轴一侧产生.WraP-reverse：可以换行,新行在靠近主轴一侧产生.<metachanic(="utf-8*><1.it1.c>弹性盒子vti1.1.c><xty1.c>.f1.ex-container(margin:3(>px:disp1.ay:cx;a1.ign-itcms:f1.ex-start;f*a1.ign-items:ex-end;*/产a1.ign-i1.ens:cen1.er;刊f4a!ign-itcms:center;/f*a1.ign-i(ens:stretch;/产ci1.ign-i1.ems:base1.ine;刊width:4(M)px;height:300px:background-co1.or:Iightb1.uc;I.f1.ex-i1.emWidI忙M)OPx;height:100x;border:IpxsohdWOOO:background-co1.or:orange:I<sty1.e><head><body><divc1.ass=,f1.cx<ontaincr><divc1.ass=*f1.ex-iiem">I<div><divc1.ass=wf1.ex-iien">2<div><divc1.ass="f1.cx-itcm',>3<div><div><body><h1.n1.>并分别在.CcxYontaincr样式中添加a1.ign-items:f1.cx-startf1cx-cndccntcristrcichbasc1.inc.查存效果：123|margin:30px:disp1.ay:f1.ex:f1.exY1.ircc1.icn:row;f1.ex-wrap:wrap;f4a1.ign-contcnt:f1.ex-start：4/户a1.ign<ontcnc:f1.cx-cad;*/户a1.ign<ontcm:center;/f*a1.ign<one11:stretch:*/*a1.ign-<on1.en1.:JipaCC-between:4/a1.ign-contcnt:spacc-around;width:400px;height:300px:backgroundcok:1.ightb1.ue:I.f1.ex-itemIwidth:1.(X>x;height:1.(X)px;margin:5px;kckgrondco1.or:orange;I<s1.y1.e><.hcad><body><divc1.ass=,'f1.ex<on(aincr"><divdass="f1.cx-itcm',>1.<div><divc1.ass=wf1.cx-itcm">2<div><divc1.ass=*f1.ex-iiem">3<div><divc1.ass=*f1.ex-ien">4<div><divc1.ass="f1.cx-itcm',>5<div><div><body><h1.n1.>并分别在.CcxYontaincr样式中添加a1.ign-contcnt:f1.cx-start1.1.cx-cndccntcrstretchspacc-bctwccnspacc-around.查看效果：Oc-II国8-I图新课讲解7，【约20分钟】项目元索可以有如下6个属性:order,f1.ex三grow.11ex<shrink%f1.ex-basts,i1.exwaiign-sc1.fOrderM性定义项目的排列项序.数值越小，排列越靠前.默认为0.<!DOCTYPEhtm1.><h1.n1.><head>VmeUChaniCt=*'utf-8"><th1.e>弹性盒子<iUe><sty1.e>.f1.ex-containermargin:30px:disp1.ay:f1.ex;width:4(X)px;height:200px:background-co1.or:Iightb1.uc;I.f1.ex-item(width:100px:height:100Px:I.f1.ex-item-1(background-co1.or:orange:orderI;I.f1.ex-item2(backgrinind-cokw:bur1.ywood;ordc112;I.ex-item-3(backgroundcok:bisque;order:1：I<sty1.e>vbcad><body><divc1.ass=,f1.exconai11er*><divc1.ass="ex-itemf1.ex-item->>1.order1.<div><divc1.ass="f1.cx-itcmf1.cx-itcm-2',>2<dcr2<div><divc1.ass=wf1.cx-itcmf1.cx-itcm3',>3order1<div><div><bdy>vhtm1.>得到如卜结果:图11-21fkKg33因性定义项目的放大比例，默认为0,即如果存在剩余空间,也不放大。V!DOCTYPEhtm1.><hm1.><head>VmCu1.cha11ict=*'utf-X>VtiHe弹性f<tit1.c><sty1.c>,ex<ontai>er(margin:30px:disp1.ay:cx;width:400p;height:200px:background-co1.or:1.ightb1.ue:I.f1.ex-itemwidth:100Px：height:1.(M)px:I.f1.ex-hem!(background-co1.or:orange;I.f1.cx-itcm2(background-co1.or:bur1.ywood;I.f1.ex-itcm-3(backgroundcok:bisque;f1.cx-grow:I;I<sty!c><hcad><body><divc1.ass=Mf1.ex-con(ainer"><divc1.ass="f1.cx-itcmf1.ex-item-1*>i<div><divc1.ass=f1.cx-itcmf1.cx-itcm2',>2<div><divc1.ass=f1.ex-itemf1.exitem3'>>3<div><div><1.iy><h1.n1.>得到结果:图11-22如果给好个项F1.设定相同的fkxgew:1;则如果彳f空余空间则好个项目OexThrink属性定义了项目的缩小比例,就认为1,即如果空间不足，该每目将缩小,如果所有项目的fkx-shrink属性都为1.当空间不足时,都将等比例缩小.如果一个项目的fkxshrink属性为0,其他项目都为1,则空间不足时，曲者不缩小。负值对该属性无效.尽可能的不要进行缩放,浏览器对此项国性的兼容性并不完美.t1.ex-basis屈性定义了在分配多余空间之前,项目占据的主轴空间(mainsize)<浏览器根据这个属性，计算主轴是否有多余空间，它的蚊认值为auto,即项目的本来大小。其单位同Wkhibheight属性的单位。i1.ex,侬性是t1.cx-grow.i1.ex-shrink和cx-basis的简写.默认便：0Iauto简写值;auto(1.1auto)none(00au(o)o建议优先使用这个属性,而不是单独写三个分高的属性,因为浏览那会推算相关值.新课讲斛8：【约20分钟】我师：演示操作上机任务使用弹性盒子布局推存页面学生：跟做新课讲斛9；【约20分钟】效加演示操作上机任务-使用弹性盒子布局课程页面学生：跟做三、教学总结【的5分仲】本单元主要讲述弹性盒子的概念.以及舛性盆子的使用方法并且完成了新云深堂项目诳行页面布局.通过木单元的学习，读者应该掌握舛性盒子的相关概念和使用方法，能鲂利用押性盒子进行页面布用。四、课后作业【的6分"】1 .整理课程知识笔记2 .尝试完成扩展实践，使用弹性盒子样式实现九宫格布局，井分析弹性盆子优缺点.
