《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第16课 元素的浮动与定位_第1页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第16课 元素的浮动与定位_第2页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第16课 元素的浮动与定位_第3页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第16课 元素的浮动与定位_第4页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第16课 元素的浮动与定位_第5页
已阅读5页，还剩9页未读， 继续免费阅读

下载本文档

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

文档简介

1621第1621第课元素的浮动与定位的基基本本PAGE1216211621元素的浮动与定位第课PAGE1316212元素的浮动与定位第16212元素的浮动与定位第课PAGE1

课题元素的浮动与定位课时2课时（90min）教学目标知识技能目标：（1）了解浮动属性与清除浮动的方法（2）掌握通过定位属性、相对定位、绝对定位、固定定位对元素进行定位的方法（3）掌握设置元素层叠等级属性的方法思政育人目标：通过对本节课的学习，培养学生举一反三的能力，使学生学会通过发散式的思维方式寻找解决问题的办法，帮助学生在模仿中提高创新能力，增强创新意识教学重难点教学重点：掌握CSS3设置元素浮动与定位元素的方法教学难点：使用CSS3语言在HTML5中浮动与定位元素教学方法讲授法、启发法、问答法、演示法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材、手机、平板教学设计第1节课：考勤（2min）→导入新知（4min）→知识讲解（24min）→课堂练习（15min）第2节课：类比分析（4min）→知识讲解（21min）→课堂练习（14min）→课堂小结（4min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课考勤

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

（4min）【教师】概述实现元素浮动与定位的原因，引出新知识点网页中的元素默认按照从左到右、从上到下的标准文档流顺序排列，如果想要使元素脱离原来的文档流，就需要用到浮动或定位属性【学生】聆听、思考通过对新知识定义的概述，让学生主动思考如何实现元素的浮动与定位，激发学生的求知欲知识讲解

（24min）【教师】讲述设置元素浮动属性的方法浮动属性浮动属性在网页布局中非常重要，设置了浮动属性的元素会脱离标准文档流的排列顺序，移动到父元素中的指定位置。浮动属性常用于构建页面布局。在CSS3中，使用float属性设置元素浮动，具体格式为：float:none|left|right;其中，none是默认值，表示元素不浮动；left表示元素向左浮动；right表示元素向右浮动。【教师】演示【例8-8】操作流程，实现图8-14的效果为图像元素设置浮动属性，页面效果如图8-14所示。设置浮动属性设置浮动属性图8-14为图像元素设置浮动属性前后页面效果的对比（1）创建HTML5文档，在<body>标签中输入以下代码，构建图文内容的结构。<div> <imgsrc="images/libai.jpg"alt="李白"/> <p><strong>李白</strong>，字太白，号青莲居士，又号“谪仙人”，唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并称为“李杜”，为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”。</p> <p>据《新唐书》记载，李白为兴圣皇帝九世孙，与李唐诸王同宗。其人爽朗大方，爱饮酒作诗，喜交友。</p></div>（2）在<head>标签中添加<style>标签，在其中输入以下代码，设置图文内容的样式，使图像元素向左浮动。div{width:600px;height:170px;padding:10px;margin:10px;border:solid2pxblack;}/*设置父元素的宽度、高度、内外边距与边框*/img{padding:10px;float:left;}/*设置图像元素的内边距，向左浮动*/p{text-indent:2em;}/*设置段落元素的缩进*/【教师】讲述清除元素浮动的方法清除浮动设置了浮动属性的元素在脱离标准文档流后，会影响到附近的兄弟元素。如果不想使某元素因受到浮动兄弟元素的影响而改变位置，可以设置clear属性清除该元素前浮动元素带来的影响，具体格式为：clear:none|left|right|both;其中，none是默认值，表示允许元素前有浮动元素；left表示不允许元素前有左浮动元素；right表示不允许元素前有右浮动元素；both表示不允许元素前有浮动元素，无论它是左浮动还是右浮动。【教师】演示【例8-9】操作流程，实现图8-16的效果清除浮动属性的应用，页面效果如图8-16所示。受到元素前左浮动元素的影响清除元素前左浮动元素的影响受到元素前左浮动元素的影响清除元素前左浮动元素的影响图8-16清除浮动的页面效果（1）创建HTML5文档，在<body>标签中输入以下代码（省略内容见图8-16），构建图文内容的结构。<div> <imgsrc="images/dbes_1.jpg"alt="大报恩寺琉璃塔拱门"/> <imgsrc="images/dbes_2.jpg"alt="大报恩寺琉璃塔拱门"/> <imgsrc="images/dbes_3.jpg"alt="大报恩寺琉璃塔拱门"/> <p>大报恩寺琉璃塔拱门是南京大报恩寺的重要建筑构件，大报恩寺是明代皇家寺庙建筑的代表，寺中的琉璃塔，被誉为中古世纪七大奇观之一。…</p> <imgsrc="images/ysth_1.jpg"alt="驿使图画像砖"/> <imgsrc="images/ysth_2.jpg"alt="驿使图画像砖"/> <imgsrc="images/ysth_3.jpg"alt="驿使图画像砖"/> <pclass="p1">邮驿是中国传统通信组织形式，现代邮政的前身之一。…</p></div>（2）在<head>标签中添加<style>标签，在其中输入以下代码，清除第二个p元素前左浮动元素的影响。div{width:500px;height:350px;padding:10px;margin:10px;border:solid2px#7f7f72;background-color:beige;}/*设置父元素的宽度、高度、内外边距、边框与背景颜色*/img{width:130px;height:80px;padding:10px;float:left;}/*设置图像元素的宽度、高度与内边距，并向左浮动*/p{text-indent:2em;}/*设置段落元素的缩进*/.p1{clear:left;}/*为第二个段落元素清除其前左浮动元素的影响*/【学生】聆听、思考、理解【教师】讲解通过定位属性对元素进行定位的方法定位属性使用浮动属性能够实现一定的布局效果，但不能对元素的位置进行精确控制。在CSS3中，可以通过定位属性对元素进行精确定位。1．定位模式在CSS3中，使用position属性设置元素的定位模式，具体格式为：position:static|relative|absolute|fixed;各属性值的说明如下。（1）static。默认值，静态定位模式，它表示元素按照标准文档流的位置显示。（2）relative。相对定位模式，它表示将元素以其在标准文档流中的原位置为基准进行定位。（3）absolute。绝对定位模式，它表示将元素以上一个已定位父元素的位置为基准进行定位。（4）fixed。固定定位模式，它表示以浏览器窗口的位置为基准对元素进行定位。2．偏移量定位模式用于设置元素以哪种方式定位，确定元素的位置还需要设置偏移量属性，它们的说明如下。（1）top。顶部偏移量，设置元素与参照元素上边线的距离。（2）right。右侧偏移量，设置元素与参照元素右边线的距离。（3）bottom。底部偏移量，设置元素与参照元素下边线的距离。（4）left。左侧偏移量，设置元素与参照元素左边线的距离。它们的属性值为数值与单位，也可以是百分比。【教师】讲解通过相对定位对元素进行定位的方法相对定位定位模式为相对定位的元素将以其在标准文档流中的原位置为基准，根据所设置的偏移量向对应方向移动一定距离，并且保留它在标准文档流中的位置。在设置偏移量时，上下与左右方向只需设置一个属性值。例如，设置某元素相对定位模式下的左侧偏移量为10px，则其右侧偏移量自动变为−10px。【教师】演示【例8-8】操作流程，实现图8-14的效果设置元素的相对定位，页面效果如图8-18所示。相对元素在原文档流的位置进行定位，并保留其原位置相对元素在原文档流的位置进行定位，并保留其原位置图8-18相对定位的页面效果【学生】聆听、思考、理解【教师】巡视课堂，督促学生复习课堂内容【学生】回顾课堂内容，提出疑问【教师】回答学生疑问通过讲解知识点，让学生进一步了解元素浮动与定位的处理方法课堂练习

（15min）【教师】布置课堂练习内容布置课堂练习内容设置div元素的高度、内外边距、边框与背景颜色，并向左浮动,设置第二个div元素的定位模式为相对定位，顶部偏移量为30px，左侧偏移量为80px统计小组得分和回答时间【学生】阅读课堂练习题目【教师】指导学生分析题目创建HTML5文档，参照以下代码段分别在<style>和<body>标签中输入代码，设置第二个div元素的相对定位。<style> .fd_l{height:30px;padding:10px;margin:10px; .p1{position:relative;top:30px;left:80px;}</style>……<body> <divclass="fd_l"style="width:50px;">box1</div> <divclass="fd_lp1"style="width:80px;">box2</div> <divclass="fd_l"style="width:100px;">box3</div></body>【学生】完成课堂练习【教师】公布小组得分和回答时间【学生】查看小组得分和排名【教师】总结学习心得通过课堂练习的完成，加深学生对本节课内容的理解第二节课类比分析

（4min）【教师】类比分析生活中案例，提出问题，引出新的知识点所谓相对定位，就是以某一个物体为参照物，根据参照物的改变，它的位置信息也会发生变化，而绝对定位则是在确定的坐标系下，物体所处的位置，拥有确定的坐标，固定定位则是将物体固定在一个的位置，不会随坐标系的变化而变化【学生】聆听、思考、理解通过对生活中案例的类比分析，激发学生对元素浮动与定位的探索欲预备知识

（21min）【教师】讲解通过绝对定位对元素进行定位的方法绝对定位定位模式为绝对定位的元素将以最近的已定位（相对、绝对或固定定位）父元素的位置为基准，根据所设置的偏移量向对应方向移动一定距离。如果所有父元素都未定位，则以浏览器窗口为基准。【教师】演示【例8-11】操作流程，实现图8-19的效果设置元素的绝对定位，页面效果如图8-19所示。以父元素为基准的绝对定位以浏览器窗口为基准的绝对定位以父元素为基准的绝对定位以浏览器窗口为基准的绝对定位图8-19绝对定位的页面效果创建HTML5文档，参照以下代码段分别在<style>和<body>标签中输入代码，设置父元素与其第二个子元素的绝对定位。<style>/*省略.fd_1{…}，具体代码同例8-10*/ .d1{position:absolute;top:50px;left:50px; border:solid2px#000000;overflow:hidden;}/*设置父元素的定位模式为绝对定位，顶部偏移量和左侧偏移量为50px，添加边框，隐藏溢出部分*/ .p1{position:absolute;top:30px;left:20px;}/*设置第二个子元素的定位模式为绝对定位，顶部偏移量为30px，左侧偏移量为20px*/</style>……<body> <divclass="d1"> <divclass="fd_l"style="width:50px;">box1</div> <divclass="fd_lp1"style="width:80px;">box2</div> <divclass="fd_l"style="width:100px;">box3</div> </div></body>【教师】讲解通过固定定位对元素进行定位的方法固定定位固定定位是绝对定位的特殊情况，即全部以浏览器窗口为基准进行定位。为元素设置固定定位后，该元素脱离标准文档流，始终显示在浏览器窗口的固定位置，不随浏览器窗口大小变化或滚动条移动而改变。【教师】演示【例8-12】的操作流程，实现图8-20的效果设置元素的固定定位，页面效果如图8-20所示。元素位置相对于浏览器窗口固定元素位置相对于浏览器窗口固定图8-20固定定位的页面效果创建HTML5文档，参照以下代码段分别在<style>和<body>标签中输入代码，设置第二个div元素的固定定位。<style>/*省略.fd_1{…}，具体代码同例8-10*/ .p1{position:fixed;right:30px;top:20px;}/*设置第二个div元素的定位模式为固定定位，右侧偏移量为30px，顶部偏移量为20px*/</style>……<body> <divclass="fd_l"style="width:50px;">box1</div> <divclass="fd_lp1"style="width:80px;">box2</div> <divclass="fd_l"style="width:100px;">box3</div></body>【学生】观看代码，思考【教师】讲解参考代码【学生】聆听、思考、记录【教师】讲解设置元素层叠等级属性的方法层叠等级属性对元素进行定位时，可能会出现元素重叠的状况，默认情况下，标准文档流中越靠后的元素显示在越靠上的层级。在CSS3中，可以使用z-index属性设置元素的层叠等级，调整定位元素的显示层级。它的值可以为负数、正数和0，默认值为0，属性值越大，定位元素将显示在越靠上的层级（属性值相同则以标准文档流为基准，越靠后的元素显示在越靠上的层级。【教师】演示【例8-13】操作流程，实现图8-21的效果设置元素的层叠等级，页面效果如图8-21所示。未设置层叠等级根据设置的层叠等级显示未设置层叠等级根据设置的层叠等级显示图8-21设置元素层叠等级的页面效果（1）创建HTML5文档，在<body>标签中输入以下代码，构建div元素的结构。<divclass="d1"> <divclass="fd_l"style="width:50px;">box1</div> <divclass="fd_lf1"style="width:80px;">box2</div> <divclass="fd_lf2"style="width:100px;">box3</div></div><divclass="d1"> <divclass="fd_l"style="width:50px;">box1</div> <divclass="fd_lf1z1"style="width:80px;">box2</div> <divclass="fd_lf2z2"style="width:100px;">box3</div></div>（2）在<head>标签中添加<style>标签，在其中输入以下代码，设置第二个容器元素中子元素的层叠等级。/*省略.fd_1{…}，具体代码同例8-10*/.f1{position:absolute;left:70px;}.f2{position:absolute;left:150px;}/*设置元素的绝对定位，使它们重叠*/.z1{z-index:-1;}.z2{z-index:-2;}/*设置元素的层叠等级*/【学生】聆听、思考、理解通过讲解知识点，让学生进一步了解元素浮动与定位的使用方法课堂练习

（15min）【教师】布置课堂练习内容完善“网上书店”页面【学生】查看题目，理解【教师】进行问题分析本课堂练习实施将为“网上书店”页面添加侧边栏与右侧导航，并设置网页整体结构【学生】完成课堂练习【教师】演示参考代码（1）在样式文档中添加以下代码，设置右侧导航的样式#main_f{width:40px;position:fixed;right:0px;top:50%;}/*设置右侧导航的宽度、固定定位的右侧与顶部偏移量*/#main_fp{background-color:#606184;font-weight:bold;border-radius:5px;color:#ffffff;padding:5px05px5px;}/*设置右侧导航中文本的背景颜色、字体加粗、圆角、文本颜色与内边距*/#main_fa{text-decoration:none;}/*去除右侧导航中超链接的下划线*/（2）继续在样式文档中添加以下代码，设置整体布局#main_n{width:1200px;margin:0pxauto;display:block;}/*设置中心区域的宽度与外边距，将其转化为块级元素（设置该属性是为了兼容个别版本的IE浏览器）*/#aside_n{width:23%;margin-left:0.5%;float:right;}/*设置侧边栏区域的宽度为中心区域的23%、左外边距为0.5%，并向右浮动*/#main_left{width:75%;float:left;}/*设置主体内容的宽度为中心区域的75%，并向左浮动*/#main_left>div{margin:0;}/*去除主体内容中div元素的外边距*/.clear{clear:both;}/*清除空的div元素前的浮动元素的影响（解决高度塌陷问题）*/（3）继续在样式文档中添加以下代码，设置侧边栏的样式.as_dw,.as_sd{border:solid1px#d4d4d4;padding-bottom:20px;background-color:#ffffff;border-radius:8px;margin-top:20px;}/*设置两个侧边栏的边框、下内边距、背景颜色、圆角与上外边距*/#aside_nh3{text-indent:3em;color:#5f556b;border-bottom:solid1px#cdd1ff;}/*设置侧边栏标题的缩进、文本颜色与下边框*/.as_dwulli{display:inline-block;width:100%;border-bottom:dotted1px#cccccc;text-indent:1em;margin:5pxauto;list-style-type:none;}/*将短文推荐侧边栏中的列表项转换为行内块元素，设置其宽度、下边框、缩进与外边距，去除列表样式*/.as_dwullia{display:block;color:#666666;font-size:0.95em;margin-bottom:5px;text-decoration:none;}/*将短文推荐侧边栏列表项中的超链接转换为块级元素，设置其文本颜色、字号与下外边距，去除下划线*/.as_dwullia:hover{color:#b8b8b8;}/*设置鼠标指针移动至短文推荐侧边栏中超链接上时的文本颜色*//*设置热门书单侧边栏中列表项的内边距，隐藏溢出部分并去除列表样式*/.as_sdimg{display:block;width:100px;height:50px;border-radius:5px;padding-right:10px;float:left;}/*将热门书单侧边栏中的图像转换为块级元素，设置其宽度、高度、圆角与右内边距，并向左浮动*/.as_sda{color:#66687f;font-size:0.8em;text-indent:0.5em;}/*设置热门书单侧边栏中超链接的文本颜色、字号与缩进*/.as_sda:hover{color:#959595;}/*设置鼠标指针移动至热门书单侧边栏中超链接上时的文本颜色*/【学生】对比参考代码，修改内容【教师】讲解参考代码【学生】聆听、思考、记录利用练习法，培养出学生对元素浮动与定位的使用经验，强化学生利用元素浮动与定位解决实际问题的能力课堂小结

（4min）【教师】简要总结本章的知识要点本节课学习了浮动属性与清除浮动的方法、通过定位属性，相对定位、绝对定位、固定定位对元素进行定位的方法，以及置元素

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

温馨提示

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

最新文档

评论

0/150

提交评论