Web前端开发任务驱动式教程（HTML5+CSS3+JavaScript）（第2版）（微课版） 教案 第10讲次 任务11 元素的浮动.docx

教案

序号：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、i