教案《HTML5CSS3项目开发案例教程》第17课CSS3常见布局形式_第1页
教案《HTML5CSS3项目开发案例教程》第17课CSS3常见布局形式_第2页
教案《HTML5CSS3项目开发案例教程》第17课CSS3常见布局形式_第3页
教案《HTML5CSS3项目开发案例教程》第17课CSS3常见布局形式_第4页
教案《HTML5CSS3项目开发案例教程》第17课CSS3常见布局形式_第5页
已阅读5页，还剩13页未读， 继续免费阅读

下载本文档

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

文档简介

生的出勤情况 (2min)CSS3常见布局形式第课CSS2课时(90min)知识技能目标： (3)掌握使用弹性伸缩盒进行布局的方法思政育人目标：思维、辩证思维和创新思维能力，引导学思考的良好习惯重点：学习CSS3构建三列布局的方法教学重难点教学难点：利用CSS3语言构建三列布局第1节课：考勤(2min)→导入新知(4min)→知识讲解(24min)→上台演示(15min)第2节课：导入新知(4min)→知识讲解(30min)→课堂小结(7min)→作业布置(4min)主要教学内容及步骤课考如何在网页中进行丰富的布局，激发学生的求知欲导入新知 (4min)列布局等【教师】讲述单列和双列布局1第课CSS3常见布局形式式只需按照标准文档流的顺序添加容器标签即可，必要时可通过将点，让学生进一步的使用，掌握对侧侧边栏的布局形式。构建这种布识讲解 识讲解 (24min) (1)创建HTML5文档，在<body>标签中输入以下代码，标<div>主体部分</div> (2)在<head>标签中添加<style>标签，在其中输入以下代码，/*设置页面的宽度与内外边距，设置文本的字号、字体加粗与居中对齐*/2/*设置页眉与页脚的宽度、高度、背景颜色与外边距*//*设置中心区域的宽度、高度、相对定位、背景颜色与外边距*//*设置侧边栏的宽度、高度、背景颜色、绝对定位的顶部与左侧偏移量*//*设置主体部分的宽度、高度、背景颜色、绝对定位的顶部与右侧偏移量*/实现三列布局，可在例9-1的基础上分别设置左、中、右3个模块绝对定位的左侧(或右侧)偏移量为0%、15%和85%(以两侧侧边栏宽度各占父元素的15%为例)。或向右浮动。但使用这种方法构建的布局不够稳定，在实际应用中，可通过设置外边距属性或将两个侧边栏模块分别向左和向右浮动来17第课344第课构建三列布局 (15min)第二节课学生的交流表达能力导入新知 (4min)知识讲解 (30min)上一节课，主要讲述了单列和双列布局，在单列布局和双列布局的基础上，讲述了三列布局，但是这些布局要控制好对象像素的大小，提前做好精密的计算，在拓展性和延伸性上不是很好，今天学习的弹性伸缩盒可以解决上述问题局部布局的盒子模型，称为弹性伸缩盒。使用弹性伸缩盒构建布局的方式叫作弹性伸缩盒布局(flex布局)，它把父元素转换为具有式分布在父元素中，节课讲述的内容17CSS3常见布局形式第课现图9-3效果局的页面效果签中输入代码，设置容器元素为弹性伸缩盒，使其块级子元素显示盒*/bordersolid2px/*设置子元素的宽度、高度、内外边距、边框与背景颜色*/5第课素为伸缩容器，其子元素为伸缩项目，伸缩项目可有多个。伸缩容 (1)主轴(mainaxis)：伸缩容器的主轴指明伸缩行的方向， (2)主轴起点(main-start)与主轴终点(main-end)：主轴的 (3)主轴长度(mainsize)：伸缩项目在主轴方向上的长度。 (4)侧轴(crossaxis)：伸缩容器的侧轴垂直于主轴，默认 (5)侧轴起点(cross-start)与侧轴终点(cross-end)：侧轴的开始位置为侧轴起点，结束位置为侧轴终点。 (6)侧轴长度(crosssize)：伸缩项目在侧轴方向上的长度。的排列方向，具体格式为：在flex布局中，使用flex-wrap属性设置伸缩容器是否多行显6617CSS3常见布局形式第课示，具体格式为： 方向上的对齐方式，具体格式为： 上的对齐方式，具体格式为：d 对齐方式，具体格式为：77通过通过复习总结，让学生清楚的梳理这节课学习的 (7min)第课CSS3常见布局形式现图9-8效果-8水平导航条的页面效果 (2)在<head>标签中添加<style>标签，在其中输入以下代码，设置容器元素为弹性伸缩盒，并设置伸缩项目的对齐方式，制作水/*设置div元素的圆角、上外边距与背景颜色，将其设置为伸缩容器并设置伸缩项目的对齐方式*/字号、字体加粗与内边距，去除下划线*/本节课学习了使用CSS3构建单列、双列和三列布局的方817CSS3常见布局形式第课法，以及使用弹性伸缩盒进行布局的方法。希望同学们在课下内容通过课后练习，通过课后练习，巩固学生对知识点

人人文库> 全部分类> 办公材料 > 办公文档

温馨提示

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

最新文档

评论

0/150

提交评论