《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第17课 CSS3常见布局形式_第1页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第17课 CSS3常见布局形式_第2页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第17课 CSS3常见布局形式_第3页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第17课 CSS3常见布局形式_第4页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第17课 CSS3常见布局形式_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

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

文档简介

1731第课1731第课CSS3常见布局形式的基基本本PAGE817321CSS3常见布局形式第17321CSS3常见布局形式第课PAGE7173212CSS3常见布局形式第课173212CSS3常见布局形式第课PAGE1

课题CSS3常见布局形式课时2课时（90min）教学目标知识技能目标：（1）掌握使用CSS3构建单列和双列布局的方法（2）学习CSS3构建三列布局的操作（3）掌握使用弹性伸缩盒进行布局的方法思政育人目标：通过对本节课课程的学习，培养学生的逻辑思维、辩证思维和创新思维能力，引导学生养成独立思考和深度思考的良好习惯教学重难点教学重点：学习CSS3构建三列布局的方法教学难点：利用CSS3语言构建三列布局教学方法讲授法、启发法、问答法、演示法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材、手机、平板教学设计第1节课：知识讲解（24min）第2节课：导入新知（4min）

知识讲解（30min）

课堂小结（7min）

作业布置（4min）教学过程主要教学内容及步骤设计意图第一节课考勤

（2min）【教师】清点上课人数，记录好考勤【学生】班干部报请假人员及原因培养学生的组织纪律性，掌握学生的出勤情况导入新知

（4min）【教师】提出问题，引出新知识点在实际网页制作中，不仅可以构建类似“图书简介”页面的单列布局和“网上书店”页面的双列布局，还可以构建三列布局、多列布局等试问：在网页中如何对其进行布局？对其布局的方法有哪些【学生】聆听、思考通过问答的方式，让学生主动思考如何在网页中进行丰富的布局，激发学生的求知欲知识讲解

（24min）【教师】讲述单列和双列布局单列和双列布局小型企业宣传网站一般使用简单的单列布局，构建这种布局形式只需按照标准文档流的顺序添加容器标签即可，必要时可通过将个别容器标签左右外边距属性值设置为auto，使其居中显示。双列布局一般是指带有左侧或右侧侧边栏的布局形式。构建这种布局形式可以通过设置浮动属性，使主体部分与侧边栏一个向左浮动一个向右浮动来实现。此外，也可以通过设置定位属性实现。【教师】演示【例9-1】操作流程，实现图9-1的效果使用定位属性构建双列布局，页面效果如图9-1所示。图9-1使用定位属性构建双列布局（1）创建HTML5文档，在<body>标签中输入以下代码，标记页面的容器标签。<header>页眉</header> <main> <aside>侧边栏</aside> <div>主体部分</div> </main><footer>页脚</footer>（2）在<head>标签中添加<style>标签，在其中输入以下代码，使用定位属性设置各容器的位置，构建双列布局。body{width:1200px;padding:0;margin:0auto;font-size:1.3em;font-weight:bold;text-align:center;}/*设置页面的宽度与内外边距，设置文本的字号、字体加粗与居中对齐*/margin:0auto;}/*设置页眉与页脚的宽度、高度、背景颜色与外边距*/main{width:100%;height:300px;position:relative;background:#e0eeee;margin:0auto;}/*设置中心区域的宽度、高度、相对定位、背景颜色与外边距*/aside{width:20%;height:200px;background:#847da1;position:absolute;top:0;left:0;}/*设置侧边栏的宽度、高度、背景颜色、绝对定位的顶部与左侧偏移量*/div{width:80%;height:200px;background:#847da1;position:absolute;top:0;right:0;}/*设置主体部分的宽度、高度、背景颜色、绝对定位的顶部与右侧偏移量*/【学生】聆听、记录、思考【教师】讲述三列布局三列布局是指同时有两列侧边栏的布局形式。要使用定位属性实现三列布局，可在例9-1的基础上分别设置左、中、右3个模块绝对定位的左侧（或右侧）偏移量为0%、15%和85%（以两侧侧边栏宽度各占父元素的15%为例）。使用浮动属性实现三列布局时，可直接设置各模块一同向左或向右浮动。但使用这种方法构建的布局不够稳定，在实际应用中，可通过设置外边距属性或将两个侧边栏模块分别向左和向右浮动来固定侧边栏的位置。【教师】演示【例9-2】操作流程，实现图9-2的效果使用浮动属性构建较为稳定的三列布局，页面效果如图9-2所示。图9-2使用浮动属性构建三列布局【学生】聆听、记录、思考【教师】巡视课堂，督促学生学习【学生】回顾课程内容，对不理解的地方，提出疑问【教师】回答学生疑问通过讲解知识点，让学生进一步了解CSS3中布局的使用，掌握对CSS3语言的操作上台演示

（15min）【教师】让学生以小组为单位制作一个三列布局的页面，并组织学生上台演示操作过程【学生】小组内部讨论，制作页面，由组长上台演示【教师】与学生一起对演示结果进行评定让学生有自我展示的平台，提高学生的交流表达能力第二节课导入新知

（4min）【教师】复习上一节课内容，引出本节课知识点上一节课，主要讲述了单列和双列布局，在单列布局和双列布局的基础上，讲述了三列布局，但是这些布局要控制好对象像素的大小，提前做好精密的计算，在拓展性和延伸性上不是很好，今天学习的弹性伸缩盒可以解决上述问题【学生】聆听、思考、理解通过对上一节内容的复习，指出其不足，引出本节课讲述的内容知识讲解

（30min）【教师】讲解弹性伸缩盒弹性伸缩盒除前面介绍的几种整体布局形式外，CSS3中还有一种常用于局部布局的盒子模型，称为弹性伸缩盒。使用弹性伸缩盒构建布局的方式叫作弹性伸缩盒布局（flex布局），它把父元素转换为具有弹性的伸缩盒，将未知大小的子元素以各种形式分布在父元素中，是一种比较简便、灵活的布局方式。在CSS3中，使用display属性可将元素设置为伸缩盒，具体格式为：其中，flex表示最新版本的伸缩盒，inline-flex表示最新版本的行内伸缩盒。伸缩盒的默认宽度为100%，而行内伸缩盒的宽度取决于其子元素。【教师】演示【例9-3】操作流程，实现图9-3效果使用弹性伸缩盒布局将块级元素显示在一行中，页面效果如图9-3所示。图9-3弹性伸缩盒布局的页面效果创建HTML5文档，参照以下代码段分别在<style>和<body>标签中输入代码，设置容器元素为弹性伸缩盒，使其块级子元素显示在一行中。<style> .d_flex{width:500px;border:solid2pxblack;display:flex;}/*设置父元素的宽度与边框，并将其转换为弹性伸缩盒*/ .flex{width:40px;height:40px;padding:10px;margin:10px; border:solid2pxblack;background-color:aliceblue;}/*设置子元素的宽度、高度、内外边距、边框与背景颜色*/</style>……<body> <divclass="d_flex"> <divclass="flex">box1</div> <divclass="flex">box2</div> <divclass="flex">box3</div> <divclass="flex">box4</div> <divclass="flex">box5</div> </div></body>1．flex布局结构伸缩盒由伸缩容器与伸缩项目组成，display属性值为flex的元素为伸缩容器，其子元素为伸缩项目，伸缩项目可有多个。伸缩容器与伸缩项目也称为flex容器（flexcontainer）与flex项目（flexitem）伸缩项目沿伸缩容器的行排列，默认情况下，伸缩容器中只有一个伸缩行，并且与文本方向一致。相关概念的解释如下（1）主轴（mainaxis）：伸缩容器的主轴指明伸缩行的方向，默认为自左向右。（2）主轴起点（main-start）与主轴终点（main-end）：主轴的开始位置为主轴起点，结束位置为主轴终点。（3）主轴长度（mainsize）：伸缩项目在主轴方向上的长度。（4）侧轴（crossaxis）：伸缩容器的侧轴垂直于主轴，默认方向为自上向下。（5）侧轴起点（cross-start）与侧轴终点（cross-end）：侧轴的开始位置为侧轴起点，结束位置为侧轴终点。（6）侧轴长度（crosssize）：伸缩项目在侧轴方向上的长度。2．伸缩方向在flex布局中，使用flex-direction属性设置伸缩容器中主轴的方向，也就是伸缩项目的排列方向，具体格式为：flex-direction:row|row-reverse|column|column-reverse;其中，row是默认值，表示自左向右排列；row-reverse表示自右向左排列；column表示自上向下排列；column-reverse表示自下向上排列。3．单行或多行显示在flex布局中，使用flex-wrap属性设置伸缩容器是否多行显示，具体格式为：flex-wrap:nowrap|wrap|wrap-reverse;其中，nowrap是默认值，表示单行显示；wrap表示多行显示；wrap-reverse表示在wrap的基础上反向排列。4．对齐方式在flex布局中，设置伸缩容器的相关属性，能够使伸缩项目以不同的对齐方式显示。（1）主轴对齐。justify-content属性可以设置伸缩项目在主轴方向上的对齐方式，具体格式为：justify-content:flex-start|flex-end|center|space-between|

space-around;其中，flex-start是默认值，表示向主轴起点方向对齐；flex-end表示向主轴终点方向对齐；center表示居中对齐；space-between表示两端对齐；space-around表示平均分布。（2）侧轴对齐。align-items属性可以设置伸缩项目在侧轴方向上的对齐方式，具体格式为：align-items:stretch|flex-start|flex-end|center|baseline;其中，stretch是默认值，表示将伸缩项目拉伸至填充整个伸缩容器；flex-start表示向侧轴起点方向对齐；flex-end表示向侧轴终点方向对齐；center表示居中对齐；baseline表示根据元素中文本的基线对齐。（3）行对齐。align-content属性可以设置伸缩行在侧轴方向上的对齐方式，具体格式为：align-content:stretch|flex-start|flex-end|center|

space-between|space-around;其中，stretch是默认值，表示伸缩行拉伸至尽量占用伸缩容器的空间；flex-start表示向伸缩容器顶部对齐；flex-end表示向伸缩容器底部对齐；center表示向伸缩容器中心对齐；space-between表示向伸缩容器两端对齐；space-around表示在伸缩容器中平均分布。5．排列顺序在flex布局中，设置伸缩项目的order属性可以调整其在伸缩容器中的排列顺序，属性值可以为正整数、负整数或0，默认值为0。order属性值越大的伸缩项目显示在伸缩容器中越靠后的位置。【教师】演示【例9-4】操作流程，实现图9-8效果使用弹性伸缩盒制作水平导航条，页面效果如图9-8所示。图9-8水平导航条的页面效果（1）创建HTML5文档，在<body>标签中输入以下代码，构建导航条的结构。<navclass="head"> <ahref="#">秒杀</a> <ahref="#">优惠券</a>……（省略部分代码，具体内容如图9-8所示）</nav>（2）在<head>标签中添加<style>标签，在其中输入以下代码，设置容器元素为弹性伸缩盒，并设置伸缩项目的对齐方式，制作水平导航条。display:flex;justify-content:space-around;}/*设置div元素的圆角、上外边距与背景颜色，将其设置为伸缩容器并设置伸缩项目的对齐方式*/.heada{display:block;height:35px;color:#ffffff;font-size:1.5em;font-weight:bold;padding:8px;text-decoration:none;}/*将超链接转化为块级元素，设置其高度、文本颜色、字号、字体加粗与内边距，去除下划线*/【学生】聆听、思考、理解【教师】询问学生，是否有不理解的地方，回答学生提问【学生】举手，提出问题【教师】回答学生问题通过讲解的知识点，拓展学生的知识面，开拓学生的视野课堂小

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

温馨提示

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

最新文档

评论

0/150

提交评论