小伙伴们，学习了jQuery，那么让我们一起来做一个综合的作业吧，根据效果图及要求，完成作业！

一、语言和环境

    1、实现语言

            HTML CSS jQuery

    2、 环境要求及开发工具

             建议 Sublime text

二、网页整体要求

    1、要求页面整洁、美观，与提供的页面效果图、结构保持一致

    2、要求代码书写、命名符合规范，在代码中添加必要的注释

    3、网页文件夹管理，样式、脚本、图片等资料独立文件夹

    4、网页内容居中显示

三、具体要求：  

    1、网页分为以下几部分：顶部、logo区、导航区、banner图、楼层区、友情链接区、页脚区，右侧导航。

    2、顶部：

        （1）整个区域背景颜色为：#f3f5f7;

        （2）分为左边的登录信息和右侧的导航菜单

        （3）鼠标移入文字时，变成小手状；且字体颜色变成红色

        （4）左边的登录信息由登录、注册、手机逛慕淘组成

        （5）鼠标经过右侧导航项，显示下拉列表对应的内容

        （6）鼠标移入下拉列表时的每一项时，对应项的颜色改变，变为#cdd0d4;

    3、logo区：

        （1）整个区域背景颜色为：#f3f5f7;

        （2）由logo、搜索框及购物车组成，logo在左，搜索框居中，购物车在右

        （3）鼠标移入购物车时，字体颜色购物车图标的颜色改变，出现下拉框。且移入下拉框时颜色保持改变，颜色变为红色

        （4）鼠标移入下拉框中时，下拉框中的内容项的背景及字体颜色发生变化。背景变：#f3f5f7，字体变红色

    4、导航区

        （1）如效果图，背景颜色为：#07111b；

        （2）鼠标移入导航项时，变成小手状；且字体颜色变成红色

    5、banner区：

        （1）由商品分类、轮播图及生活服务三部分组成

        （2）鼠标移入商品的大分类时，字体与背景均发生改变，背景变为白色，字体红色；且会在右侧显示各项的小分类内容，鼠标离开商品分类区域，小分类窗口内容消失。

        （3）轮播图，单击左右按钮分别可以切换上一张、下一张，单击小圆球时可切换到对应的图片，小圆圈被选中的时候变成白色，边框是深灰色，未被选中的里面是深灰色的颜色，边框是白色；鼠标移入轮播图区域，停止轮播

        （4）鼠标移入生活服务区时，鼠标移入文字时，变成小手状；且字体颜色变成红色

    6、楼层区：

        （1）楼层区中有2个楼层

        （2）每层楼层由楼层标题、商品分类导航和商品详细内容组成 

        （3）鼠标移动楼层右上角每个分类时，楼层内的内容会对应的发生改变

    7、友情链接区：由标题及分类组成，鼠标移入分类时，变成小手状；且字体颜色变成红色

    8、页脚区：背景颜色为#f3f5f7；由底部导航与版权声明信息组成。鼠标移入底部导航时，字体颜色发生改变，变为：#07111b;

    9、右侧导航：

        （1）由5个导航项组成，导航项背景颜色为：#b7bbbf；

        （2）始终固定在浏览器窗口的右侧、并且垂直居中

        （3）鼠标移入每项时，左侧会有文字提示信息

        （4）鼠标移入每项时，背景改变颜色,变为：#71777d；

        （5）单击回到顶部按钮时，页面会回到顶部

规范【4分】

• 网页文件夹管理，图片资料独立文件夹

• HTML代码规范及添加适量注释

网页整体【4分】

• 页面整体结构使用HTML布局，网页居中显示，每个区域背景色贯穿整个页面。

顶部【10分】

• 与效果图结构保持一致；整个区域背景颜色为：#f3f5f7;

• 左侧有登录注册信息

• 右侧导航项，带有箭头的导航项，鼠标移入时，要出现下拉列框

• 鼠标移入文字时，变成小手状；且字体颜色变成红色。有下边

logo区【16分】

• 与效果图保持一致；整个区域背景颜色为：#f3f5f7;

• logo在左侧，中间搜索框要有提示文字，搜索框与搜索按钮高度要一致，搜索按钮没有边框，鼠标移入时呈小手状

• 鼠标移入购物车时，字体颜色购物车图标的颜色改变，出现下拉框，且移入下拉框时颜色保持改变，颜色变为红色

• 鼠标移入下拉框时，下拉框中的内容项的背景及字体颜色发生变化，背景变：#f3f5f7，字体变红色

导航区【4分】

• 与效果图结构保持一致；背景颜色为：#07111b

• 当鼠标移入导航项时，变成小手状；且字体颜色变成红色

• 导航项之间的距离相等

banner区域【30分】

• 左侧与效果图保持一致；商品分类项与导航部分要有重合，鼠标移入商品类型的各项时（后有箭头的每项），字体与背景均发生改变，且紧挨着商品类型的右边要出现每一个分类具体的商品（在轮播图的区域显示）

• 中间与效果图保持一致；图片每1秒钟切换1次。当鼠标停留在整个轮播图区域时，图片不进行轮播。当点击右下角的小圆圈时，出现该选项的对应图片，小圆圈被选中的时候变成白色，边框是深灰色，未被选中的里面是深灰色的颜色，边框是白色当图片发生轮播切换时，在不点击小球前提下，相应的小球背景颜色也自动发生变化。单击左边的箭头会切换前一张，单击右边的箭头会切换后一张

• 右侧与效果图保持一致；右侧可分为上中下三部分，整个部分要有边框；上部分为快报，鼠标移入每条消息时，字体颜色变成红色；中间部分，分为三行四列排布，每项要有图片及文字；下部分为图片，宽度要与上边对齐

楼层区【12分】

• 与效果图保持一致；有两个楼层，楼层的右上边会有3个分类

• 鼠标移动到每个分类时，对应的分类下会有箭头指示，字体颜色变成红色

• 鼠标移动到每个分类时，楼层内的图片也会对应的发生改变

友情链接区【7分】

• 与效果图保持一致；与上个区域之间有直线分割

• 整体，居中显示，分为4列，每列有标题，及分类，鼠标移入分类时，字体颜色发生改变

页脚区【4分】

• 与效果图保持一致；背景颜色为#f3f5f7；

• 内容要居中，分别有底部导航与版权声明信息；

• 底部导航项鼠标移入改变颜色，变为：#07111b;

• 各项之间的距离要相等

右侧导航【9分】

• 与效果图保持一致；导航项背景颜色为：#b7bbbf；

• 始终固定在浏览器窗口的右侧，并且垂直居中。

• 鼠标移入每项时，背景改变颜色,变为：#71777d，右侧会有文字提示信息。

• 单击回到顶部按钮时，页面会回到顶部