让IT教学更简单,让IT学习更有效.PDF

让让ITIT教学更简单，让教学更简单，让ITIT学习更有效学习更有效 讲解阶段案例  目录 让IT教学更简单，让IT学习更有效 元素的浮动 overflow属性 元素的定位 元素的类型与转换 制作网页焦点图 6.5 制作网页焦点图 让IT教学更简单，让IT学习更有效 本章前几节重点讲解了元素的浮动、定 位、以及清除浮动。为了使读者更好地运用 案例引入 浮动与定位组织页面，本节将通过案例的形 式分步骤制作一个网页焦点图，其效果如下 图所示。 当鼠标移左图中的焦点图时，两侧将 出现焦点图切换按钮，效果如下图所示。 讲解阶段案例 让IT教学更简单，让IT学习更有效 本章前几节重点讲解了元素的浮动、定位、以及清除浮动。为了使读者更好 地运用浮动与定位组织页面，本节将通过案例的形式分步骤制作一个网页焦 点图，其默认效果如图所示。 •网页焦点图认效果 当鼠标移上图6-26 中的焦点图时，两侧将会出现焦点图切换按钮，效果如图 所示。 讲解阶段案例 让IT教学更简单，让IT学习更有效 1. 结构分析 观察效果图6-26不难看出，焦点图模块整体上可以分为3部分：焦点图、切 换图标、切换按钮。焦点图可以使用img标记；切换图标由6个小图标组 成，可以使用无序列表ul 、li搭建结构；焦点图切换按钮可以使用两个 a标记定义。效果图6-26对应的结构如图6-28所示。 div a a img ul嵌套li标记 讲解阶段案例 让IT教学更简单，让IT学习更有效 2、样式分析 控制效果图6-26 的样式主要分为4个部分，具体如下： 1. 通过div对整个页面进行整体控制，需要设置相对定位方式。 2. 通过a标记控制左右两侧的切换按钮样式及其位置，并设置左浮动样式。 3. 通过ul整体控制切换图标模块，需要设置绝对定位方式。 4. 通过li控制每一个切换小图标，需要设置每个小图标的显示效果。