基本信息
文件名称:Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)(第2版)(微课版) 教案 第10讲次 任务11 元素的浮动.docx
文件大小:1.55 MB
总页数:11 页
更新时间:2025-05-27
总字数:约2.61千字
文档摘要

教案

序号: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属性