5.3,5.4相对定位和绝对定位.pptxVIP

相对定位和绝对定位 一、温故而知新 回顾浮动（float）定位的特性及属性（结合上机作业） 浮动在文本中的使用 浮动在布局中的使用 清除浮动 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止 浮动框不在文档流中，文档流中普通框会对浮动框视而不见 浮动元素会生成一个块级元素，而不论它本身是何种元素 利用浮动知识和定义列表，分析下图效果： 二、教学目标 充分理解相对定位和绝对定位（重点） 可独立实现网页中链接的跳动效果（点击查看效果）、添加凡客网中产品的标识（如下图效果） 能明确的区别浮动定位、相对定位和绝对定位（难点） 3.1 相对定位 Position:relative 准备：三个水平方向的盒子（点击查看） 演示：将框2在原有的基础上往下移动20px，往右移动30px 代码：position:relative; top:20px;left:30px; 效果： 小结：设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。 3.2 随堂练习1 鼠标经过链接，链接的文字有下沉效果（点击查看效果） 注：可把a转化为块级元素 3.3 绝对定位 Position:absolute 演示：将框2在原有的基础上进行改动 代码：position:absolute;