实训4-9制作网页焦点图
焦点框生成方案及案例说明
焦点框生成说明文档0. 目的 (2)1. 概要 (2)2. 画面结构图 (2)3.数据结构说明 (3)4.例子说明 (6)4.1例子说明 (6)4.2区域划分 (6)4.2.1.区域划分规则 (7)4.3区域位置定位 (8)4.4区域结构化 (8)4.5区域关系映射 (9)4.6区域焦点框点击处理设置 (10)4.7焦点框生成 (11)4.7.1区域集作成 (11)4.7.2默认焦点作成 (11)4.7.3画面HTML对象作成 (12)4.7.4焦点框初始化(生成各个区域的焦点框和各个区域关系的建立等处理) (12)4.7.5重置之前焦点框 (12)0.目的对于IPTV页面开发来说，焦点框的位置定位和移动关系的建立是非常耗时的一件事，为了简化此工作，提高工作效率，本文将讲述如何自动生成页面焦点框。
从而使程序员只需关注焦点框具体逻辑处理。
1.概要焦点框(Rectangle)生成做法是基于每个划定的区域(Area)中，所包含的各个焦点框的宽度、高度是一样的。
这样设定之后，对于一个画面(HTML)中，就是由许多的区域(抽象为：Area)组成，而对于每个区域Area，则由许多个焦点框(抽象为：Rectangle)组成。
那么具体焦点框的移动可以视为焦点框从一个区域移动到另一个区域。
据此对于焦点(抽象为：Focus)移动来说，可以通过设置一个焦点框的宽度、高度、左边距、上边距来移动。
该焦点框可以是一张背景图片，一个黄色的边框(可以自定义样式)2.画面结构图基于【1.概要中所抽象的数据对象】，对于一个HTML页面可以抽象成下面的结构：3.数据结构说明本内容对【2画面结构】中的数据结构做简单的说明，如下，具体可以详细内容可以看focus.js文件备注：handlerInfos：是一个数据对象，结构如下：handlerInfos={execute:function(html){//ToDo：所属区域内的焦点框比较点击时，//所执行的逻辑，在此执行。
职高网页设计知识点
职高网页设计知识点一、网页设计的基本概念和原则在开始学习网页设计的知识点之前，我们首先需要了解网页设计的基本概念和原则。
网页设计是指将各种元素组合在一起，创造出能够在互联网上被访问和浏览的页面。
以下是网页设计的一些基本原则：1. 目标导向：网页设计应该明确目标，根据用户需求进行设计，以实现预期的效果。
2. 简洁性：网页应该简洁明了，避免出现复杂、混乱的布局和内容。
3. 易用性：网页应该易于导航和使用，用户可以轻松找到所需信息。
4. 色彩搭配：合理选择色彩，使网页更具吸引力和易读性。
5. 内容布局：合理安排网页上的各种元素，使其整体结构清晰、有序。
6. 图片和文字的选择：使用高质量的图片和清晰明了的文字，使用户能够准确理解网页内容。
二、网页设计中的重要元素和技术1. 布局设计：布局设计是网页设计中非常重要的一部分，它包括页面结构、导航、内容排版等。
合理的布局能够使网页更加美观和易于使用。
2. 色彩设计：色彩设计是网页设计中不可忽视的一环，合理的色彩搭配可以给用户带来舒适的阅读体验。
同时，色彩也可以用于表达网页的主题和风格。
3. 图片处理：在网页设计中，图片是常用的元素之一。
要注意选择合适的图片，并进行必要的处理和优化，以减小网页加载时间，提高用户体验。
4. 响应式设计：随着移动设备的普及和使用，响应式设计成为了不可忽视的网页设计技术。
响应式设计可以使网页在不同设备上自动适应并呈现最佳布局。
5. 导航设计：导航设计是网页中用户进行浏览和导航的重要组成部分。
合理的导航设计可以帮助用户快速找到所需信息。
6. 用户体验设计：用户体验设计是针对用户需求和期望进行设计，目的是提供良好的用户体验。
它关注用户在使用过程中的感受以及用户的满意度。
三、网页设计工具和软件在进行网页设计时，我们可以借助一些专业的设计工具和软件来辅助完成设计任务。
以下是一些常用的网页设计工具和软件：1. Adobe Photoshop：用于图片处理和图像设计，是网页设计中最常用的软件之一。
《项目综合实训》(网络)教学大纲
《项目综合实训》课程大纲课程名称：项目综合实训实训学时：128适用专业：计算机网络技术课程类别：专业课一、实训的性质、目的与要求《项目综合实训》课程是一门技术性和实践性很强的学科，其是在基础理论教学完成之后，在校内利用仿真设备及模拟实训软件进行的实践性教学环节，是计算机网络技术专业必须加强的技能教学环节。
目的：通过企业项目式教学主要培养学生的动手能力，让学生提前了解企业的工作内容与使用的技术手段，通过该实训课程的学习，学生能够对所学过的基本知识和方法进行练习和巩固，具备初步的独立设计能力，提高综合运用所学的理论知识独立分析和解决若干简单问题的能力。
为学生在未来的企业实习打下坚硬的基础。
要求：掌握网页设计基本概念和PHP的基本结构，了解网页技术概况、数据库的编辑和运行环境。
掌握文字版面的编辑，掌握网页的超链接技术的应用，了解图像的处理，包括背景图案、图形、图象及其超链接等的设定和应用。
了解列表的各种使用，了解表格的基本语法，掌握表格的定义、控制、分组、标题等的应用。
了解表单在网页中的应用，了解如何在网页中加入各种动态效果如JavaScript和jQuery，了解网页中框架的基础知识，掌握CSS的各种属性应用二、实训方式学生上机操作，教师指导。
三、考核方法1、考试形式：考查2、考核方式：开卷3、考核教学内容：综合运用网页制作工具制作项目4、课程成绩评分方法：总成绩=第一阶段项目30%+第二阶段项目30%+第三阶段项目40%四、实训指导书及主要参考资料实训指导书：《网页制作实训指导书》电子商务组编内部使用参考书：《PHP+Mysql网站开发技术项目式教程》第二版唐俊编人民邮电出版社2015《PHP Web 应用开发案例教程》阮云兰钟诚张磊编上海交通大学出版社2017《PHP+Ajax+jQuery网站开发项目式教程》传智播客编人民邮电出版社2016五、实训项目及学时分配实训项目一览表六、实训项目内容及其要求实训一在线考试系统（20学时）【实训目的】熟悉项目开发准备阶段的过程学会进行需求分析掌握PHP开发环境的搭建，学会服务器的基本配置掌握PHP项目的创建，学会搭建虚拟主机网站【实训内容】本次实训是通过对高校师生考试的需求调查和分析，为了方便学生平时可以通过网络随时地进行模拟考试练习【实训要求】：要求：进入考试页面后，系统会进行倒计时，事件到达后系统会自动交卷交卷时，系统会对未作答的题目进行提醒交卷后课查看每道题的正误得分，以及试卷的总分支持判断题、单选题、多选题、填空题共四种题型实训二博客管理系统（24学时）【实训目的】：让学生更加深入了解项目相关命令及实际的程序开发流程，熟练掌握一些基础知识【实训内容】：设计一个博客管理系统，其中包括：需求分析、系统设计、数据库设计、网站首页设计、注册模块设计等【实训要求】：要求：掌握博客管理系统的开发流程掌握如何做项目需求分析和系统设计掌握数据库设计的基本步骤和方法掌握搜索分页技术掌握图片上传技术掌握验证码技术掌握城市级联动技术实训三个人主页（24学时）【实训目的】：通过本次实训的学习使学生掌握jQuery的基本使用。
电子商务网页图像制作完整版教学课件全书电子讲义
5. PSD 格式
PSD 是图像处理软件 Adobe Photoshop 的专用格式。PSD 其实是 Photoshop 进行平面设计的一张“草稿图”，它里面包含有各种图层、通道、遮 罩等多种设计的样稿，以便于下次打开文件时可以修改上一次的设计。在 Photoshop 所支持的各种图像格式中，PSD 的存取速度比其他格式快很多，功能 也很强大。
RGB 图像使用红、绿、蓝三种颜 色，在屏幕上可以重现多达 1670 万 种颜色。RGB 图像为三通道图像，每 个像素包含 24 位（8×3）。新建 Photoshop 图像的默认模式为 RGB， 计算机显示器总是使用 RGB 模型显示 颜色。
RGB颜色模式
2. CMYK 模式
CMYK 颜色模式以打印在纸张上油墨的光线吸收特性为基础，当白光照射 到半透明的油墨上时，部分光线被吸收，部分被反射回眼睛。理论上，纯青色 （C）、品红（M）和黄色（Y）色素能够合成吸收所有颜色并产生黑色，因此， CMYK 模型也叫作减色模型。由于所有打印油墨都会包含一些杂质，这三种油墨 实际上产生的是一种土灰色，因此必须与黑色（K）油墨混合才能产生真正的黑 色。
标准色轮不同色相及其饱和度变化
基于颜色的色相（Hue）、饱和 度（Saturation）、明度（Brightness） 三要素，在Photoshop等计算机绘图 软件中，常用 HSB 模式来描述颜色。
使用 HSB 模式描述颜色
二、数字图像的色彩模式
除了 HSB 颜色表示模式，计算机图像处理软件通常还使用 RGB、CMYK 及 Lab 等色彩模式，以便在不同应用领域更好地表示颜色。其中 RGB 模式是一种 发光屏幕的加色模式；CMYK 模式是一种颜色反光的印刷减色模式；Lab 模式是 为了弥补 RGB 和 CMYK 两种色彩模式的不足，由 CIE 组织（国际照明委员会） 确定的一个理论上包括了人眼可以看见的所有色彩的色彩模式。
网页设计中“点、线、面”的视觉构成
网页设计中“点、线、面”的视觉构成此主题相关图片如下：线的视觉构成点的延伸形成线。
线在页面中的作用在于表示方向、位置、长短、宽度、形状、质量和情绪。
线是分割页面的主要元素之一，是决定页面现象的基本要素。
总的来说，线分为直线和曲线两种。
这是线的总体形状。
同时线还具有本体形状，两端的形状。
线的总体形状有垂直、水平、倾斜、几何曲线，自由线这几种可能。
线是具有情感的。
比如水平线给人开阔，安宁，平静的感觉；斜线具有动力，不安，速度和现代意识；垂直线具有庄严，挺拔，力量，向上的感觉；曲线给人柔软流畅的女性特征；自由曲线是最好的情感抒发手段。
线的放射，粗细，渐变可以体现三维空间的感觉。
将不同的线运用到页面设计中，会获得不同的效果。
知道什么时候应该运用什么样的线条，可以充分的表达你所要体现的东西。
总之，线条是网页设计师必须熟练运用的最得力的表现工具。
我们应该对他有一定的了解。
下面我们用一些精彩实例来做具体的分析说明。
在这个页面中，水平线的重复排列形成一种强烈的形式感和视觉冲击力，能够在第一眼就产生兴趣，达到了吸引访问者注意力的目的。
自由曲线的运用，打破了水平线组成的庄严和单调，给网页增加了丰富、流畅、活泼的气氛。
水平线和自由曲线的组合运用，形成新颖的形式和不同情感的对比，从而将视觉中心有力的衬托出来。
值得提出的是，页面中点（按钮）的运用，使页面的形象更加活泼，丰满。
此主题相关图片如下：线还具有两端形状。
线的两端形状可以任意形的，它决定了线的本体形状。
在这个页面中，设计师运用了具有书法味道的线条，粗糙的边缘形成特殊的肌理，表现了强烈的个性特征和艺术效果。
边缘圆滑的曲线条（字母）在粗糙背景的衬托下，显得很特殊并引人注目。
在这里，字母也可以看做是构成页面的线条的一种。
底纹采用了不规则，方向不一的虚线条，在丰富肌理的同时，和粗线、曲线（字母）形成对比，产生了纵深空间的感觉。
曲线（字母）的大小对比也可以丰富空间层次。
近实远虚的绘画原理，在这里得到了最充分地体现此主题相关图片如下：将曲线（字母）随意的重叠，变形，占踞了页面左上角的很的一部分空间。
HTML5+CSS3网站设计浮动与定位
第6章浮动与定位《HTML5+CSS3网站设计基础教程》学习目地/Target理解元素地浮动,能够为元素设置浮动样式。
熟悉清除浮动地方法,可以使用不同方法清除浮动。
掌握元素地定位,能够为元素设置常见地定位模式。
章节概述/Summary默认情况下,网页地元素会按照从上到下或从左到右地顺序一一罗列,如果按照这种默认地方式进行排版,网页将会单调,混乱。
为了使网页地排版更加丰富,合理,在CSS可以对元素设置浮动与定位样式。
本章将对元素地浮动与定位进行详细讲解。
目录/Contents01元素地浮动02元素地定位03元素地类型与转换04阶段案例—制作网页焦点图01元素地浮动初学者在设计一个页面时,通常会按照默认地排版方式,将页面地元素从上到下一一罗列。
这样地布局看起来呆板,不美观,那么,如何对页面重新排版,使页面变得整齐,有序呢？这就需要为元素设置浮动。
本节将对元素地浮动进行详细讲解。
掌握元素地浮动属性float地用法,能够设置元素地浮动。
学习目地1.元素地浮动属性float1.元素地浮动属性float究竟是什么是浮动？应用排列图文排列论坛分享说到浮动,其实大家并不陌生1.元素地浮动属性float浮动属性作为CSS地重要属性,在网页布局至关重要。
在CSS,通过float属性来定义浮动,所谓元素地浮动是指设置了浮动属性地元素会脱离标准文档流地控制,移动到其父元素指定位置地过程。
选择器{float:属性值;}属性值描述left元素向左浮动right元素向右浮动none元素不浮动（默认值）掌握清除浮动地方法,能够为元素清除浮动。
学习目地2.清除浮动2.清除浮动2.清除浮动由于浮动元素不再占用原文档流地位置,所以会对页面其它元素地排版产生影响,如果要避免这种影响,就需要对元素清除浮动。
2.清除浮动在CSS,使用clear属性清除浮动。
选择器{clear:属性值;}属性值描述left不允许左侧有浮动元素（清除左侧浮动地影响）right不允许右侧有浮动元素（清除右侧浮动地影响）both同时清除左右两侧浮动地影响2.清除浮动运用clear属性只能清除元素左右两侧浮动地影响。
实训九 框架型网页的制作
实训九框架型网页的制作课时：2 班级：12计算机班实训日期：2013-4-19 编写时期：2013-4-10一、实训目的1、掌握框架集和框架的创建和保存；2、掌握框架、框架集的编辑和属性的设置；3、掌握框架超级链接。
二、实训内容利用框架制作如下图所示的页面效果，框架集网页为index.html，其中：图1为打开index.html的效果图；图2 单击左侧“动物类”的网页效果图；图3 单击左侧“插花类”的网页效果图；图4 单击左侧“海洋类”的网页效果图；图5 单击左侧“邮票类”的网页效果图；图6 单击左侧“诗歌”的网页效果图，其中诗歌内容在“si.txt”文档中；图7 单击左侧“散文”的网页效果图，其中散文内容在“爱情人生.doc”文档中。
图1 图2图3 图4图5 图6图7三、知识点分解该实训主要涉及的知识点就是框架和框架集的保存以及设置超链接的目标框架。
四、实训步骤1、选择[文件]/[新建]菜单命令。
2、在“新建文档”对话框“类别”列表中选择“框架集”选项。
3、从“框架集”列表选择相应的框架集，如图所示。
4、单击按钮，则会弹出“框架标签辅助功能属性”对话框，为每一框架指定一个标题，单击“确定”按钮，则上方框架标题为“topFrame”，左侧框架标题为“leftFrame”，右侧框架标题为“mainFrame”。
5、选择[查看]/[可视化助理]/[框架边框]菜单命令，则在文档中就会出现框架的边框。
6、选择[文件]/[保存全部]菜单命令，将框架集文件保存为index.html，上方框架文件保存为top.html，左侧框架文件保存为left.html，右侧框架文件保存为main.html。
注意：对于框架集和框架文件保存的文件名，一定要做的看到文件名就能知道该文件对应与该框架集中的哪个框架。
7、选择[窗口]/[框架] 菜单命令，打开“框架”面板，直接在面板中单击最外面的框架集，打开属性对话框，设置“行值”：119px，再选择里面嵌套的框架集，设置“列值”：253px。
网站图标的制作
练习：网站图标的建立1、绘制图标的第一部分（1）首先创建一个新文档，400*300。
使用椭圆工具创建一个椭圆，并且填充渐变，由黄色#FFFF00到橘黄色#FF9900的放射状渐变。
然后旋转，并且使用钢笔工具加点，调整成如图所示的形状。
（2）再绘制出两个红色椭圆，使用部分选择工具对其中一个椭圆进行变形，制作出一个感叹号。
然后放置到椭圆图形的中间位置上。
（3）再绘制出一个椭圆，椭圆的大小与第一个椭圆的大小相当，然后使用“刀子工具”横切椭圆，选中椭圆的下半部分，将其删除。
将上半部分的椭圆放置到已有椭圆的上半部分。
（4）对这个半个椭圆进行渐变填充，由白色半透明（不透明度设置为70%）到白色完全透明的渐变。
设置好后，将渐变模式选择为“轮廓”。
渐变的方向如图所示。
2、下面制作图标的第二部分（1）选择“椭圆工具”，绘制一个椭圆，设置放射渐变，由淡绿—>深绿—>淡绿的渐变。
（2）继续绘制一个由白色不透明到白色完全透明的放射状渐变椭圆，作为绿色渐变椭圆的高光部分。
（3）选中绿色渐变椭圆，依次使用组合键“Ctrl+C”和“Ctrl+V”,复制出一个新的绿色渐变椭圆，将它移动到画布的空白处。
（4）选择“圆角矩形”，绘制出一个圆角矩形，将圆角矩形的填充模式选择为“线性”填充，并将该矩形放置到第（3）步绘制出的椭圆上。
（5）同时选中椭圆和圆角矩形，执行菜单中的“修改—>组合路径—>裁切”命令，将两个图形组合成如图所示的效果。
（6）再绘制出一个椭圆，放在裁切后的图形上方，然后同时选中裁切后的椭圆和这个椭圆，执行菜单中的“修改—组合路径—联合”命令，将两个图形组合成一个图形，并适当调整渐变的距离，作为小人图像效果。
（7）最后制作高光，由白色半透明渐变椭圆。
最后效果如图所示。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
实训4-9 制作网页焦点图
一、实训目的
1.理解元素的浮动，能够为元素设置浮动样式；
2.熟悉清除浮动的方法，可以使用不同方法清除浮动；
3.掌握元素的定位，能够为元素设置常见的定位模式；
4.实训过程中，重点关注：元素的浮动属性float、运用clear属性清除浮动、运用
overflow属性清除浮动、使用after伪对象清除浮动、overflow属性、元素的定位属性。
二、案例描述
制作一个HTML5网页焦点图“网页焦点图.html”，默认效果如图1所示。
图1 网页焦点图默认效果
当鼠标移上图1焦点图时，两侧将会出现焦点图切换按钮，效果如图2所示。
图2 鼠标移上焦点图效果
三、分析效果图
1.结构分析
观察效果图1不难看出，焦点图模块整体上可以分为3部分：焦点图、切换图标、切换按钮。
焦点图可以使用<img>标记；切换图标由6个小图标组成，可以使用无序列表<ul>、<li>搭建结构；焦点图切换按钮可以使用两个<a>标记定义。
效果图2对应的结构如图3所示。
图3 焦点图页面结构图
2.样式分析
控制效果图2的样式主要分为4个部分，具体如下：
（1）通过<div>对整个页面进行整体控制，需要设置相对定位方式。
（2）通过<a>标记控制左右两侧的切换按钮样式及其位置，并设置左浮动样式。
（3）通过<ul>>整体控制切换图标模块，需要设置绝对定位方式。
（4）通过<li>控制每一个切换小图标，需要设置每个小图标的显示效果。
四、案例实现
1.常规准备工作
启动Hbuilder，在Hbuilder中新建web项目“实训4-9”，建议建在D盘根目录。
将实训4-9更名为“学号最后两位+姓名-实训4-9”，称为“实训文件夹”
2.制作页面结构
在“实训文件夹”中新建HTML页面“网页焦点图.html”
拷贝网页素材图片到相应Img文件夹。
使用HTML标记搭建页面结构，参考代码如下：
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>网页焦点图</title>
6</head>
7<body>
8<div>
9<img src="images/11.jpg" alt="网页焦点图">
10<a href="#"class="left"><</a>
11 <a href="#" class="right">></a>
12 <ul>
13 <li class="max"></li>
14 <li></li>
15 <li></li>
16 <li></li>
17 <li></li>
18 <li></li>
19 </ul>
20</div>
21</body>
22</html>
结构中，通过最外层的<div>对车载音乐页面进行整体控制，并使用<img>标记插入焦点图片。
同时，定义class为left和right的两对<a><a>标记，来搭建焦点图左右两侧切换按钮的结构。
另外，使用<ul>、<li>搭建切换图标模块的6个小图标。
运行以上代码，效果如图4所示。
图4 HTML结构页面效果
3.定义CSS样式
搭建完页面的结构，接下来为页面添加CSS样式。
采用从整体到局部的方式实现图1、图2所示的效果，具体如下。
（1）在“实训文件夹”中新建一个CSS文件，命名为“网页焦点图.css”
（2）定义基础样式
首先定义页面的统一样式，具体CSS代码如下：
/*重置浏览器的默认样式*/
*{margin:0; padding:0; border:0; list-style:none;}
/*全局控制*/
a{text-decoration:none; font-size:30px;color:#fff;}
（3）控制整体大盒子
制作页面结构时，我们定义了一对<div></div>来对网页焦点图模块进行整体控制，设置其宽度和高度固定。
由于切换按钮和切换图标需要依据大盒子进行定位，所以需要对其设置相对定位方式。
另外，为了使页面在浏览器中居中，可以对其应用外边距属性margin。
具体CSS代码如下：
div{ /*整体控制页面*/
width:580px;
height:200px;
margin:50px auto;
position:relative; /*设置相对定位*/
}
（4）整体控制左右两边的切换按钮
通过效果图2可以看出，当鼠标移上焦点图时，图片两侧会添加焦点图切换按钮，需要为<a>元素应用float属性，并设置宽高、背景色。
另外，切换按钮显示为圆角、半透明效果，需要对其设置圆角边框样式，并设置背景的不透明度。
同时，设置切换按钮中的文本样式。
最后，通过“display:none;”设置按钮隐藏。
具体CSS代码如下：
a{ /*整体控制左右两边的切换按钮*/
float:left;
width:25px;
height:90px;
line-height:90px;
background:#333;
opacity:0.7; /*设置元素的不透明度*/
border-radius:4px;
text-align:center;
display:none; /*把a元素隐藏起来*/
cursor:pointer; /*把鼠标指针变成小手的形状*/
}
（5）控制左右两侧切换按钮的位置和状态
由于左右两侧的切换按钮位置不同，需要分别对其进行绝对定位，并设置不同的偏移量。
另外，当鼠标移上焦点图时，图片两侧的切换按钮将会显示，需要对其应用“display:block;”样式。
具体CSS代码如下：
.left{ /*控制左边切换按钮的位置*/
position:absolute;
left:-12px;
top:60px;
}
.right{ /*控制右边切换按钮的位置*/
position:absolute;
right:-12px;
top:60px;
}
div:hover a{ /*设置鼠标移上时切换按钮显示*/
display:block;
}
（6）整体控制焦点图的切换图标模块
观察效果图可以看出，焦点图的切换图标由6个小图标组成，需要对其进行整体控制，并通过绝对定位来控制位置。
另外，切换图标显示为圆角、半透明样式，需要设置圆角边框，并设置背景的不透明度。
同时，为了使切换图标模块中的小图标居中对齐，可以设置“text-align”属性。
具体CSS代码如下：
ul{ /*整体控制焦点图的切换图标模块*/
width:110px;
height:20px;
background:#333;
opacity:0.5;
border-radius:8px;
position:absolute;
right:30px;
bottom:20px;
text-align:center;
}
（7）控制每个切换小图标
观察焦点图切换模块的6个小图标，除了第1个小图标，其他小图标都显示为灰色、圆形效果，需要对其设置宽高、背景色及圆角边框样式。
另外，所有小图标在一行内显示，需要将<li>转换为行内块元素，具体CSS代码如下：
li{ /*控制每个切换小图标*/
width:5px;
height:5px;
background:#ccc;
border-radius:50%;
display:inline-block; /*转换为行内块元素*/
}
（8）单独控制第一个切换小图标
根据上面的分析，第1个切换小图标的显示效果与其他小图标不同，需要对其单独设置宽度、圆角边框及背景色样式。
具体CSS代码如下：
.max{ /*单独控制第一个切换小图标*/
width:12px;
background:#03BDE4;
border-radius:6px;
}
至此，我们完成了效果图1所示的网页焦点图模块。
将该样式应用于网页后，效果如图5所示。
当鼠标移上焦点图时，页面效果如图6所示。
图5 网页焦点图页面效果
图6 鼠标移上焦点图页面效果
4.交作业：
将“实训文件夹”压缩打包后上传。