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

教案

序号:11

授课日期

课时数

4

章节名称

任务12元素的定位

教学内容

重点

静态定位、相对定位、绝对定位、固定定位。

难点

绝对定位的使用。

教学目的与要求

掌握元素的定位方式:静态定位(static)、相对定位(relative)、绝对定位(absolute)、固定定位(fixed)。

了解不同定位模式的应用场合。

教学方法

与手段

教师采用任务驱动法,使用教学PPT辅助授课。

教师操作演示,学生实训练习。

学生课前课后均可通过“浙江省高等学校在线开放课程共享平台”的配套微课学习。

作业及

思考题

完成课堂上未完成的习题,通过网络平台上交作业。

通过回帖的方式回答课上留下的思考题。

预习下一节内容。

讲授内容

课堂组织

第一学时

(任务12元素的定位

12.1元素的定位模式与边偏移、12.2静态定位、12.3相对定位)

实操任务目标发布

实战演练——制作旅游景点推荐网banner

图11-SEQ图\*ARABIC\r11“旅游景点推荐网”banner

强化训练——制作个人博客首页

图11-SEQ图\*ARABIC2“个人博客首页”网页

知识准备

元素的定位

可以精确定义一个元素的准确位置

(1)定位模式:position属性

static:静态定位

relative:相对定位

absolute:绝对定位

fixed:固定定位

(2)边偏移:

left:左侧偏移量

right:右侧偏移量

top:顶端偏移量

bottom:底部偏移量

静态定位(static)

静态定位(static):网页元素默认的定位方式,元素按照标准流进行布局。

不能通过设置边偏移属性left、right、top、bottom值来改变元素的位置。

相对定位(relative)

相对定位(relative):网页元素相对于其在原文档流的位置进行定位,当元素设置为相对定位“position:relative;”,该元素就会相对于其自身的默认位置进行偏移,但是它在文档流中的位置仍然保留。

子任务:

图11-SEQ图\*ARABIC3元素相对定位后的效果

第二学时

(任务12元素的定位

12.4绝对定位、12.5固定定位、12.6z-index层叠等级属性)

知识准备

绝对定位

绝对定位(absolute):将元素相对于距离其最近的、已经定位(相对、绝对或固定定位)的父元素进行定位,若所有父元素都没有定位,则依据body根元素(浏览器窗口)进行定位。

当元素设置为绝对定位“position:absolute;”,该元素就会相对于其父元素或body根元素进行偏移,脱离文档流,它在文档流中的位置将被其他元素占据。

子任务:

图11-SEQ图\*ARABIC4元素绝对定位后的效果

图11-SEQ图\*ARABIC5按照“子绝父相”原则对元素进行绝对定位

固定定位

固定定位(fixed):相对于浏览器窗口进行定位。

元素设置为固定定位之后,就会脱离原来的文档流进行定位,原有的位置将被其他元素占据。

无论浏览器窗口大小如何改变,浏览器滚动条如何拖动,固定定位的元素都将显示在浏览器的固定位置。

z-index层叠等级属性

z-index层叠等级属性:定义叠加元素的堆叠顺序,其值可以取正整数、0、负整数,默认值为0,取值越大,定位元素的位置就越靠上。

图11-SEQ图\*ARABIC6元素叠加现象

第三学时

实战演练——制作旅游景点推荐网banner

案例描述:设计并制作旅游景点推荐网banner,网页效果如下图11-7所示。当鼠标移动到每个导航选项上时,超链接的样式将会发生变化,效果如图11-8所示。

图11-SEQ图\*ARABIC7“旅游景点推荐网”banner

图11-SEQ图\*ARABIC8鼠标指针移至没个导航选项时超链接的样式

图11-SEQ图\*ARABIC9“旅游景点推荐网”banner网页布局

第四学时

强化训练——制作个人博客首页

案例描述:设计并制作个人博客首页,网页效果如下。

图11-SEQ图\*ARABIC10“个人博客首页”网页

图11-SEQ图\*ARABIC11“个人博客首页”网页布局

课后实训

案例描述:设计新闻列表页面,效果如图所示。

图11-SEQ图\*ARABIC12“新闻列表”网页

发布任务,学生能够有目标地进行学习

教师讲解

学生操作巩固

此部分为教学难点,教师详细讲解,配合任务操作,帮助学生理解掌握。

理论讲解

教师操作演示

学生练习

学生练习