6.3,6.及4复习.pptx

阶段性复习 一、教学目标 回顾盒模型、浮动、定位和基本导航等基本知识 通过实例操作，对相关知识点进行巩固（重点） 熟记相关浏览器兼容性问题，并进行灵活处理 二、温故而知新 总结盒模型、浮动、定位和基本导航中的关键点 注：关键点可以是重点、难点或者是易错地方 3.1 盒模型 1、重要知识点 文档流 块级元素与内联元素的区别及如何相互转化 盒模型相关属性 盒模型大小（宽度和高度）计算 属性缩写形式 2、实例巩固 要求：根据盒模型相关知识，实现如下图效果（宽：360px 高：210px） 3.1 盒模型 分析 布局为上下结构，根据标签语义化标准，上部使用h标记，下部使用列表ul； 外层容器border设置，标题下border设置 列表项图标使用背景图片定位 代码实现 3、兼容性问题 Ie5中盒子的宽度为width和height值（了解） 由于在不同的浏览器中或加浮动和定位后列表项显示效果不同，所以列表项尽量采用背景图片实现 内联元素无法直接设置大小、内外边距，要想设置，先转化为块级元素 3.2 浮动 1、重要知识点 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止 由于浮动框不在文档的普通流中（也可以理解成是脱离了标准文档流）， 所以文档的普通流中的块框表现得就像浮动框不存在一样。 浮动元素会生成一个块级元素，而不论它本身是何种元素。 清除浮动所带来的影响，设置：clear:both即可 2、实例巩固 要求：根据浮动相关知识，实现如下图效果 3.2 浮动 分析 主要考察定义列表的使用，默认情况为上下结构，通过浮动设置实现左右效果。 代码实现 3、兼容性问题 ie6的margin加倍问题 产生背景：float:left; margin-left:10px; 解决办法：display:inline; ie6的3像素bug问题 产生背景：未设置浮动元素与前面浮动元素的3像素距离 解决办法：设置float（此处需重点强调） 3.2 浮动 内层浮动，外层不能自动扩高（主要是ie8和ff）。 方法一：给外层设置固定高度，但由于内层高度不确定，故此方法不提倡使用； 方法二：清除浮动，即清除浮动所带来的影响。 浮动元素自动换行，被卡住问题 高度固定，内容超过高度，则会自动扩高，解决办法：设置overflow：hidden 浮动的列表，图标不出现 以背景图片的方式展示图标，可通过背景图片定位、padding等进行相关设置。 3.3 定位 1、重要知识点 相对定位pisition:relative 绝对定位 position:absolute 绝对定位的特殊性质 固定定位position:fixed（了解即可） 空间位置 z-index 2、实例巩固 要求：结合相关知识，实现如下图效果 3.3 定位 分析 略 代码实现 3、兼容性问题 Ie6不支持fixed绝对定位，所以，对此属性，我们只需要了解即可 3.4 基本导航 导航是对前面所学知识点的综合运用，只有把前面所学知识点都熟练掌握了，导航效果的实现将变的更加轻松。 所涉及知识点：列表、浮动、内联元素与块级元素的相互转化、背景图片定位、定位等 具体略 小 结 作业 实现本节课三个实例巩固效果，并结合相关知识，实现如下图效果 复习基本导航效果，实现效果（点击查看）