《Web前端开发(HTML5+CSS3+JavaScript)》 教案 严健武 第10--24次课： 定位与浮动--- 实验8 登录与注册表单 .docx

PAGE16

PAGE

XXX学院

教案

二0二～二0二学年第学期

课程名称

课程类别￡公共基础课￡大类平台课￡通识课

R专业课￡实验课￡集中实践课

课程性质R必修□选修

授课专业及班级

任课教师

系（教研室）

主教材信息

（教材名称、出版社及出版时间）

Web前端开发(HTML5+CSS3+JavaScript)

严健武主编中国铁道出版社

2024年8月出版

总学时

起始周

理论课时数

实验课时数

习题课时数

机动

48

32

16

0

0

W7第10次课：定位与浮动

第次课

10

课题

定位与浮动

教学目标与要求：

掌握和理解位置和定位属性，能够将位置属性用于页面布局。

授课类型(请打√)：理论课R讨论课□实验课□习题课□上机□辅导□其他□

教学重点：

相对定位

绝对定位

固定定位

教学难点：

相对定位和绝对定位的应用

教学方法和手段：

教学方法：课堂讲授、实例演示与实操

教学手段：多媒体课件

教学内容及课堂设计(可续页)：

教学内容主要包括：1.相对定位；2.绝对定位；3.固定定位；4.粘性定位。

1相对定位

相对定位是指当元素的位置属性position取值为relative时，可以通过改变其left、top、right、bottom四个定位属性来改变其默认位置。

在定位属性中，left和top指离原来位置左上角距离，而right和bottom指离右下角的距离。如果同时设置left、right，则right属性无效；同样，如果同时设置top和bottom，则bottom无效。

相对定位的元素依然占据原来的空间，不影响其前、后的元素的布局；

相对位置属性一般不单独使用，而是作为其子元素在进行绝对定位时的参考位置。

演示与讲解

理解相对位置的特性

图9.1（a）是三个宽度、高度分别为60px、40px的div，位置属性取默认值；如果改变div2的位置属性为相对定位，并使其left、top属性分别为20px和-20px，那么它将相对其左上角坐标向左偏移20px，向上偏移20px，如图9.1（b）所示。

图9.1（a）默认位置

图9.1（b）相对位置

图9.1（b）效果的实现代码如下：

!DOCTYPEhtml

html

body

divDIV1/div

divclass=relaDIV2/div

divDIV3/div

/body

/html

style

div{

border:1pxdottedgray;

width:60px;

height:40px;

}

.rela{

position:relative;

left:20px;

top:-20px;

}

/style

代码说明：

行3~6：页面添加3个div，其中DIV2应用了样式类rela。

行10~14：使用标记选择器，使3个div具有相同的高度、宽度以及虚线边框。注意，在调试阶段为了能看到效果，通常会为元素加上边框或背景色。

行15~19：声明样式类rela。首先设置位置属性为relative，这使得元素可以改变位置；left、top属性表示相对元素原来的位置（0，0），向左、向上偏移20px。如果两者都取正值，表示向左、向下偏移；如果都取负值，表示向右、向上偏移。

2绝对定位

绝对定位是指当元素的位置属性position为absolute时，可以通过改变其left、top、right和bottom属性来实现重新定位。

绝对定位是相对具有非默认位置的父元素进行的定位。所谓非默认位置，是指position的值不是默认值（static）,可以是相对位置、绝对位置，或下面介绍的固定位置等。如果逐级向上所有的父元素都没有设置位置属性，绝对位置的元素将相对页面左上角（body{left:0;top:0;}）进行定位。

特征：元素脱离了原来的位置，不再占用原来空间，其后续元素将占有其空出来的空间；可以通过改变定位属性（left、top、right和bottom）来重新定位，新位置不影响其他元素的布局；如果同时改变left、right，或者top、bottom，那么元素的对应的宽度或高度将自动改变，这点与相对位置属性不同；具有绝对