四、【技能锤炼】参考学习强国app首页焦点图效果：
2.1、任务1：网页焦点图简单版
1、分析目标任务；
2、查阅资料；
3、设计构思；
4、技术实现；
5、参考效果:
2.2、任务2：网页焦点图优化版
1、页面增加小图标显示效果，为交互效果作准备；
2、左右图标点击效果改为鼠标移上焦点图，两侧才出现切换按钮。
鼠标移上焦点图效果
分析效果图
1、 结构分析
观察效果图6-26不难看出，焦点图模块整体上可以分为3部分：焦点图、切换图标、切换按钮。焦点图可以使用<img>标记；切换图标由6个小图标组成，可以使用无序列表<ul>、<li>搭建结构；焦点图切换按钮可以使用两个<a>标记定义。效果图6-26对应的结构如图6-28所示。
图6-28 焦点图页面结构图
2、样式分析
控制效果图6-26的样式主要分为4个部分，具体如下：
（1） 通过<div>对整个页面进行整体控制，需要设置相对定位方式。
（2） 通过<a>标记控制左右两侧的切换按钮样式及其位置，并设置左浮动样式。
（3） 通过<ul>>整体控制切换图标模块，需要设置绝对定位方式。
（4） 通过<li>控制每一个切换小图标，需要设置每个小图标的显示效果。
制作页面结构
根据上面的分析，使用相应的HTML标记搭建网页结构，如例6-13所示。
例6-13 example13.html
在例6-13中，通过最外层的<div>对车载音乐页面进行整体控制，并使用<img>标记插入焦点图片。同时，定义class为left和right的两对<a><a>标记，来搭建焦点图左右两侧切换按钮的结构。另外，使用<ul>、<li>搭建切换图标模块的6个小图标。
运行例6-13，效果如图6-29所示。
图6-29 HTML结构页面效果
4.1.3 定义CSS样式
搭建完页面的结构，接下来为页面添加CSS样式。本节采用从整体到局部的方式实现图6-26、图6-27所示的效果，具体如下。
1、 定义基础样式
首先定义页面的统一样式，具体CSS代码如下：
/*重置浏览器的默认样式*/
/*全局控制*/
2、 控制整体大盒子
制作页面结构时，我们定义了一对<div></div>来对网页焦点图模块进行整体控制，设置其宽度和高度固定。由于切换按钮和切换图标需要依据大盒子进行定位，所以需要对其设置相对定位方式。另外，为了使页面在浏览器中居中，可以对其应用外边距属性margin。具体CSS代码如下：
3、 整体控制左右两边的切换按钮
通过效果图6-26可以看出，当鼠标移上焦点图时，图片两侧会添加焦点图切换按钮，需要为<a>元素应用float属性，并设置宽高、背景色。另外，切换按钮显示为圆角、半透明效果，需要对其设置圆角边框样式，并设置背景的不透明度。同时，设置切换按钮中的文本样式。最后，通过“display:none;”设置按钮隐藏。具体CSS代码如下：
4、 控制左右两侧切换按钮的位置和状态
由于左右两侧的切换按钮位置不同，需要分别对其进行绝对定位，并设置不同的偏移量。另外，当鼠标移上焦点图时，图片两侧的切换按钮将会显示，需要对其应用“display:block;”样式。具体CSS代码如下：
5、 整体控制焦点图的切换图标模块
观察效果图6-26可以看出，焦点图的切换图标由6个小图标组成，需要对其进行整体控制，并通过绝对定位来控制位置。另外，切换图标显示为圆角、半透明样式，需要设置圆角边框，并设置背景的不透明度。同时，为了使切换图标模块中的小图标居中对齐，可以设置“text-align”属性。具体CSS代码如下：
6、 控制每个切换小图标
观察焦点图切换模块的6个小图标，除了第1个小图标，其他小图标都显示为灰色、圆形效果，需要对其设置宽高、背景色及圆角边框样式。另外，所有小图标在一行内显示，需要将<li>转换为行内块元素，具体CSS代码如下：
7、 单独控制第一个切换小图标
根据上面的分析，第1个切换小图标的显示效果与其他小图标不同，需要对其单独设置宽度、圆角边框及背景色样式。具体CSS代码如下：
至此，我们完成了效果图6-26所示的网页焦点图模块。将该样式应用于网页后，效果如图6-30所示。当鼠标移上焦点图时，页面效果如图6-31所示。
图6-30 网页焦点图页面效果
图6-31 鼠标移上焦点图页面效果
