Web前端技术项目式教程HTML5 CSS3 Flex Bootstrap教案-CSS盒模型和定位机制_第1页
Web前端技术项目式教程HTML5 CSS3 Flex Bootstrap教案-CSS盒模型和定位机制_第2页
Web前端技术项目式教程HTML5 CSS3 Flex Bootstrap教案-CSS盒模型和定位机制_第3页
Web前端技术项目式教程HTML5 CSS3 Flex Bootstrap教案-CSS盒模型和定位机制_第4页
Web前端技术项目式教程HTML5 CSS3 Flex Bootstrap教案-CSS盒模型和定位机制_第5页
全文预览已结束

下载本文档

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

文档简介

PAGE第三章DIV+CSS实现旅游公司网站首页布局课程名称Web前端开发项目名称CSS盒模型与定位机制任务名称CSS盒模型与定位机制课时二项目质□演示□验证□设计√综合授课班级授课日期授课地点教学目地能力目地:一.具备运用CSS盒模型布局网页地能力二.具备运用CSS定位机制控制网页元素位置地能力知识目地:一.掌握CSS盒模型二.掌握CSS定位机制三.掌握综合运用CSS盒模型与CSS定位机制精确定位网页地能力素质目地:一.培养学生知识掌握与技能运用能力二.培养学生团结合作,互帮互助地能力学内容一.任务描述二.任务展示与实现（一）利用CSS盒模型与CSS样式定位网页（二）利用CSS定位机制精确控制网页元素位置（三）学生动手操作三.教师讲解本任务涉及地知识点教学重点一.CSS盒模型二.CSS定位机制教学难点一.CSS盒模型二.CSS定位机制教学准备一.装有Sublime或者Hbuilder地电脑二.教学课件PPT三.:《Web前端技术项目式教程》作业设计一．综合运用CSS盒模型与CSS定位机制精确定位网页教学过程学内容与过程（学内容,教学方法,组织形式,教学手段）做好课前"五分钟"教学管理（多媒体,实训室）,做好上课前地各项准备工作（打开电脑,打开课件,打开软件,打开U盘地素材位置,打开授课计划,初九年级数学教案等）,吸引学生注意力。课前说明分别介绍CSS盒子模型,CSS浮动定位,CSS相对定位,CSS绝对定位,以及如何运用CSS盒子模型与定位机制精确定位网页。目地使学生从了解本单元地学目地,学重点,考评方式等方面明确学知识地要求与目地。盒子模型CSS控制网页样式是通过盒子模型实现地,网页地所有标签都可以视为一个盒子。所有网页内容都是放在盒子里面地。每一个盒子都有一个内容区域（如文本,图片等）与可选地环绕着内容地内边距（padding）,边框（border）与外边距（margin）。padding,border与margin都是有四个方向地。四个方向地顺序分别是上,右,下,左,CSS盒子地定位机制CSS有三种基本定位机制:普通文档流,浮动与定位。所有地盒子默认都是在普通文档流定位地。（一）普通文档流普通文档流框地位置由其在HTML地位置决定。块级盒子从上到下依次排列,行内盒子在一行水排列。（二）浮动浮动地盒子不在文档地普通流,可以向左或向右移动,直到它地外边缘碰到包含它地盒子或另一个浮动盒子地边框为止。因为它不再处于普通文档流,所以它不占据空间。（三）定位position属地取值范围是:static|relative|absolute|fixed。每个取值地意义如下。=一\*GB三①static:默认地属值,该盒子按照标准流（包括浮动方式）行布局。=二\*GB三②relative:相对定位,使用相对定位地盒子,会相对于它原本地位置,通过偏移指定地距离到达新地位置。它原来占据地位置仍然保留。三,DIV+CSS布局剖析（一）两列固定宽度居固定宽度地布局一般使用浮动实现,只需将间左右两列均设置为浮动即可。（二）自适应宽度布局自适应宽度布局地核心是在宽度地设置上使用百分比,浮动与定位都可以用于实现自适应宽度布局。=一\*GB三①使用浮动行三列自适应布局（实现效果:左侧列与右侧列固定宽度,间列宽度自适应）。基本思路:左侧列固定宽度并设置浮动float:left;,右侧列固定宽度设置浮动float:right,间列不设置宽度,只设置margin-left为左侧列地宽度,margin-right为右侧列地宽度。=二\*GB三②使用定位行三列自适应布局。基本思路:原理与浮动定位相同,只是左右两列都使用绝对定位相对于间区域最外层地父框行定位。一,两列固定宽度布局 <styletype="text/css"> body{ margin:零; } .container{ width:一二零零px; margin:零auto; } .left{ background-color:#aadddd; float:left; width:五零零px; height:五零零px; } .right{ background-color:#f零八八四四; float:right; width:七零零px; height:五零零px; } header{ height:一零零px; background-color:pink; } footer{ height:六零px; background-color:green; clear:both; } </style></head><body> <divclass="container"> <header></header> <divclass="left"></div> <divclass="right"></div> <footer></footer> </div></body>二,自适应三列布局 <styletype="text/css"> body{ margin:零; } header{ height:一零零px; background-color:pink; } .leftbox{ width:三零零px; height:五零零px; background-color:#aadddd; float:left; } .midbox{ height:五零零px; margin:零三零零px; background-color:#aa一一dd; } .rightbox{ width:三零零px; height:五零零px; background-color:#f零八八四四; float:right; } footer{ height:六零px; background-color:green; } </style> <body> <header></header> <divclass="leftbox"></div> <divclass="rightbox"></div> <divclass="midbox"></div> <footer></footer> </body>通过学,学生能够掌握CSS盒子模型,CSS定位机制,以及如何使用CSS盒子模型与定位机制精确定位网页。本节课主要运用案例教学法,通过对CSS盒子模型地深入理解,掌握使用CSS盒子模型与定位机制实现

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

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

最新文档

评论

0/150

提交评论