教案
序号:10
授课日期
课时数
4
章节名称
任务11元素的浮动
教学内容
重点
元素的类型及转换、overflow属性、元素的浮动、清除浮动
难点
元素的浮动属性
教学目的与要求
掌握元素的类型及转换。
掌握overflow属性。
掌握元素的浮动、清除浮动。
了解元素浮动在网页布局中的作用。
教学方法
与手段
教师采用任务驱动法,使用教学PPT辅助授课。
教师操作演示,学生实训练习。
学生课前课后均可通过“浙江省高等学校在线开放课程共享平台”的配套微课学习。
作业及
思考题
完成课堂上未完成的习题,通过网络平台上交作业。
通过回帖的方式回答课上留下的思考题。
预习下一节内容。
讲授内容
课堂组织
第一学时
(任务11元素的浮动
11.1元素的类型及转换、11.2overflow属性)
实操任务目标发布
实战演练——制作网站导航条
图10-SEQ图\*ARABIC\r11“网站导航条”网页
强化训练——制作浪漫花语百科网
图10-SEQ图\*ARABIC2“浪漫花语百科网”网页
知识准备
元素的类型
行内(inline)元素
不占有独立的一行
完全不支持盒子模型
一般不可以设置行内元素的宽度、高度、对齐等属性
宽度和高度由其内容来决定,内容多宽占多宽
如:span、a、strong、em、i、u、s、del、ins等。
块(block)元素
占有一行或多行
完全支持盒子模型
可以设置块元素的宽度、高度、对齐等属性
如:div、h1~h6、p、ul、ol、li、header、section、article、footer等。
行内块(inline-block)元素
不占有独立的一行
支持部分盒子模型
可以设置块元素的宽度、高度、对齐等属性
如:img、input等。
元素类型的转换
选择器{display:属性值;}
属性有四个值:
inline:将元素转换成行内元素。
block:将元素转换成块元素。
inline-block:将元素转换成行内块元素。
none:将元素隐藏,不占据页面空间。
子任务:
图10-SEQ图\*ARABIC3元素类型的转换
overflow属性
在盒子模型中,当盒子内的内容超出盒子的大小时,就会产生溢出现象。我们可以对超出的内容使用overflow属性进行设置。
语法规则:选择器{overflow:属性值;}
属性有四个值:
visible:默认值,内容显示在盒子框外
hidden:将超出的内容隐藏
scroll:始终出现滚动条
auto:根据实际情况作出调整,如果没有超出就正常显示,否则将会出现滚动条
图10-SEQ图\*ARABIC
图10-SEQ图\*ARABIC4overflow效果
第二学时
(任务11元素的浮动
11.3元素的浮动、11.4清除浮动)
一、知识准备
元素浮动
改变普通文档流的排列方式,使得块元素在同一行中排列,让网页布局更加方便。
语法规则:选择器{float:属性值;}
属性有三个值:
none:默认值,表示元素不浮动
left:左浮动
right:右浮动
图10-SEQ图\*ARABIC5左浮动元素的运动轨迹
图10-SEQ图\*ARABIC6右浮动元素的运动轨迹
浮动原则:
有浮动属性的元素肯定会移动,但未必会改变原来的位置。
有浮动属性的元素是脱离原有文档流的。
如果上一行没有浮动元素,那么下一行的浮动元素是移动不上去的。
非浮动元素会忽略掉它前面的浮动元素,取代其前面浮动元素的位置。
子任务:
图10-SEQ图\*ARABIC7同时设置左浮动效果
图10-SEQ图\*ARABIC8同时设置右浮动效果
图10-SEQ图\*ARABIC9box1设置为左浮动效果
图10-SEQ图\*ARABIC10box2、box3设置为左浮动效果
清除浮动
避免浮动元素对其他元素产生的影响
语法规则:选择器{clear:属性值;}
属性有三个值:
left:清除左浮动的影响
right:清除右浮动的影响
both:同时清除左右两侧浮动的影响
图10-SEQ图\*ARABIC11清除浮动前的效果
图10-SEQ图\*ARABIC12清除浮动后的效果
清除特殊浮动
图10-SEQ图\*ARABIC13清除特殊浮动前的效果
使用空标记清除浮动
图10-SEQ图\*ARABIC14使用空标记清除浮动
使用overflow属性清除浮动
图10-SEQ图\*ARABIC15使用overflow属性