第一步，确定整体结构（页面中包含的div）
- 确定大的主页面设置类名为main；
- 确定大的菜单图（背景图片，可轮播）；
• 用一个子div包含三个a语句，并设置类名，以便设置样式的时候插入背景图片；
• 用超链接a语句以便设置样式的时候插入图片制作用于上一张/下一张的按钮；
• 设置三个小圆点，用div做出圆，在设置样式的时候设置其大小，边框等 - 确定左边主菜单栏
- 确定主菜单栏点开后的子菜单栏
注意： - 在子菜单栏下设置的div，为其设置专属类名，以便设置样式
2、小箭头
第二步，设置样式
1、 用通配符选择器清除页面默认样式；
2、指定字体的名称，并找到地址；
3、确认整个页面的字体样式及颜色
4、将html中的a标签的内容去除下划线
5、设置主框架的宽高和位置以及多余的部分的隐藏溢出效果
6、设置背景图片的大小和浮动和隐藏溢出效果，并插入三张图片
7、图片设置完成后，来制作左右两个尖括号，插入小括号的图片，并旋转
8、制作三个小圆点在同一水平线上，并设置大小，边框阴影等
9、为主菜单设置样式，设置主菜单中的内容样式
10、主菜单中的每一行都是一个div，为其设置样式宽高等
11、设置主菜单标题行右侧的小尖号
12、设置子菜单的样式，宽高，位置，背景颜色，边框等
第三步，设置JavaScript - 声明全局变量，上一张/下一张的按钮，定时器，获取焦点图的内容数组等
2、通用封装事件，非IE浏览器
3、点击下一张/上一张按钮，显示图片
4、制作小圆点链接图片效果，点击圆点，索引切换图片
5、设置定时器，开启自动轮播图片，以及清除定时器设置
6、轮播所有的图片
7、鼠标滑过主菜单，根据索引显示出来
8、细节部分，当鼠标移出子菜单栏框，不显示，否则出现的子菜单栏框不隐藏；
当鼠标移出主菜单栏框，也不显示子菜单栏框
当鼠标移动到焦点图，其正常轮播
以上。