实训4-9 制作网页焦点图.DOCVIP

第5章 CSS盒子模型 PAGE 2 PAGE 7 实训4-9 制作网页焦点图 实训目的 理解元素的浮动，能够为元素设置浮动样式； 熟悉清除浮动的方法，可以使用不同方法清除浮动； 掌握元素的定位，能够为元素设置常见的定位模式； 实训过程中，重点关注：元素的浮动属性float、运用clear属性清除浮动、运用overflow属性清除浮动、使用after伪对象清除浮动、overflow属性、元素的定位属性。 案例描述 制作一个HTML5网页焦点图“网页焦点图.html”，默认效果如图1所示。 图1 网页焦点图默认效果 当鼠标移上图1焦点图时，两侧将会出现焦点图切换按钮，效果如图2所示。 图2 鼠标移上焦点图效果 分析效果图 结构分析 观察效果图1不难看出，焦点图模块整体上可以分为3部分：焦点图、切换图标、切换按钮。焦点图可以使用img标记；切换图标由6个小图标组成，可以使用无序列表ul、li搭建结构；焦点图切换按钮可以使用两个a标记定义。效果图2对应的结构如图3所示。 图3 焦点图页面结构图 样式分析 控制效果图2的样式主要分为4个部分，具体如下： 通过div对整个页面进行整体控制，需要设置相对定位方式。 通过a标记控制左右两侧的切换按钮样式及其位置，并设置左浮动样式。 通过ul整体控制切换图标模块，需要设置绝对定位方式。 通过li控制每一个切换小图标，需要设置每个小图标的显示效果。 案例实现 常规准备工作 启动Hbuilder，在Hbuilder中新建web项目“实训4-9”，建议建在D盘根目录。 将实训4-9更名为“学号最后两位+姓名-实训4-9”，称为 “实训文件夹” 制作页面结构 在“实训文件夹”中新建HTML页面“网页焦点图.html” 拷贝网页素材图片到相应Img文件夹。 使用HTML标记搭建页面结构，参考代码如下： !doctype html html head meta charset=utf-8 title网页焦点图/title /head body div img src=images/11.jpg alt=网页焦点图 a href=#class=left/a a href=# class=right/a ul li class=max/li li/li li/li li/li li/li li/li /ul /div /body /html 结构中，通过最外层的div对车载音乐页面进行整体控制，并使用img标记插入焦点图片。同时，定义class为left和 right的两对aa标记，来搭建焦点图左右两侧切换按钮的结构。另外，使用ul、li搭建切换图标模块的6个小图标。运行以上代码，效果如图4所示。 图4 HTML结构页面效果 定义CSS样式 搭建完页面的结构，接下来为页面添加CSS样式。采用从整体到局部的方式实现图1、图2所示的效果，具体如下。 在“实训文件夹”中新建一个CSS文件，命名为“网页焦点图.css” 定义基础样式 首先定义页面的统一样式，具体CSS代码如下： /*重置浏览器的默认样式*/ *{margin:0; padding:0; border:0; list-style:none;} /*全局控制*/ a{text-decoration:none; font-size:30px;color:#fff;} 控制整体大盒子 制作页面结构时，我们定义了一对div/div来对网页焦点图模块进行整体控制，设置其宽度和高度固定。由于切换按钮和切换图标需要依据大盒子进行定位，所以需要对其设置相对定位方式。另外，为了使页面在浏览器中居中，可以对其应用外边距属性margin。具体CSS代码如下： div{ /*整体控制页面*/ width:580px; height:200px; margin:50px auto; position:relative; /*设置相对定位*/ } 整体控制左右两边的切换按钮 通过效果图2可以看出，当鼠标移上焦点图时，图片两侧会添加焦点图切换按钮，需要为a元素应用float属性，并设置宽高、背景色。另外，切换按钮显示为圆角、半透明效果，需要对其设置圆角边框样式，并设置背景的不透明度。同时，设置切换按钮中的文本样式。最后，通过“display:none;”设置按钮隐藏。具体CSS代码如下： a{ /*整体控制左右两边的切换按钮*/ float:left; width:25px; height:90px; line-height:90px;