网页结构
由于页面各个部分的背景色有所区别，为了方便设置将页面分为了四个部分：头部(header)、主要内容-上半部分(main-top)、主要内容-下半部分(main-bottom)、底部(footer)。
- 头部：页面顶部的超链接、登录注册以及购物车。背景为黑色。
- 上半部分：由四个小的div组成：水平导航+搜索框、轮播图+左侧导航菜单、轮播图底部图片展示、小米明星单品。背景为白色。
- 下半部分：智能硬件、其他内容两部分。背景为灰色。
- 底部：售后服务、版权等信息。背景白色。
页面编写
头部
头部的超链接导航和登录注册部分用两个无序列表完成。其中购物车添加一个下滑菜单。
上半部分
logo和搜索
logo和搜索比较简单，分布到两侧，按照诚衣首页的方法布局就可以完成。
水平导航
水平导航也是用无序列表来写。但是每一个导航元素还有一个下滑菜单进行展示。所以要在每一个li元素内部嵌套一个列表，用来放置展示内容。
将所有的二级列表隐藏，通过脚本控制下拉、收起等动作。
左侧导航菜单
左侧垂直导航菜单用列表写，每一个li元素都有一个二级菜单。默认状态时隐藏，鼠标滑入显示，移出隐藏。原理和购物车一样。需要注意的是它和轮播图是在一个框架内的，也就是相互重叠，导航菜单的背景色随轮播图变化，所以要将一级菜单的背景色设为透明。
大轮播图
大轮播图直接套用写好的淡入淡出轮播图即可。需要注意的是导航菜单、轮播图、二级菜单、水平导航菜单的二级菜单这几个部分都有重叠的部分，所以需要根据展示效果灵活设置z-index的值，是他们不会相互影响。
轮播图底部图片链接
根据尺寸做好布局就可以。最左侧的div里嵌套一个列表就可以完成，小图标是从easyicon找的。
明星单品
此处是一个只有两页的左右轮播图。在每一个li里面嵌套5个dl自定义列表完成。不需要数字按钮，只需要前进后退按钮。需要注意的问题是它是自动轮播的，间隔相同的时间左右交替显示。开始的时候只知道要用到计时器，但是做不到间隔相同时间自动轮播。之后才想到要用到setTimeout()和setInterval()两种计时器。就可以实现功能。
下半部分
智能硬件
智能硬件部分增加了新的内容。鼠标滑入的时候有一个悬浮效果。
默认状态
悬浮状态
这里使用脚本来模拟：鼠标滑入div后，首先添加阴影，之后让其向上移动一段距离，评价卡片滑出。这样就可以模拟出悬浮效果。鼠标移出后，恢复原样。
这里需要注意的是：最开始的时候卡片外层没有添加列表，造成的结果就是鼠标滑入后所有的卡片都运动。之后依靠列表li的索引才能精确定位。
其他内容
如图：
结构分析：
最外层使用了ul列表来放置四个项目;每个项目中又有一个小的轮播图，也使用了一个ul列表；而且每个轮播图还有圆圈按钮，用了一个ol列表。
三个列表相互嵌套，使得结构比较麻烦，不容易定位到要操作的元素。造成的结果就是最开始轮播只要操作一个小轮播图，其他的轮播图要么不动，要么一起运动。查阅jQuery手册后发现可以通过each()先遍历最外层li，之后再操作轮播图比较好实现。
这样只需要编写小轮播图的代码就可以完成功能。不会互相影响。
底部
通过dl自定义列表完成，比较简单。