学习了组件化开发思想，赶快动手实践一下吧！

一、网页整体要求：

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

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

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

      4、网页内容居中显示

      5、使用组件化编程思想完成本次作业

二、具体要求：  

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

      2、顶部：

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

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

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

        （4）左边的登录信息由“亲，请登录”、“免费注册”、“手机逛慕多多”组成

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

      3、logo区：

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

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

      4、导航区：

        （1）如效果图，背景颜色为#c1043f

        （2）鼠标移入导航项时，变成小手状

        （3）鼠标移入导航项，字体颜色变成红色，导航项背景色变成黑色

     5、banner区：

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

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

         （3）单击轮播图上的左右按钮分别可以切换上一张、下一张

        （4）单击小圆球时可切换到对应的图片，小圆圈被选中的时候变成白色，边框是深灰色，未被选中的里面是深灰色的颜色，边框是白色

        （5）鼠标移入轮播图区域，停止轮播

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

      7、楼层区：

        （1）楼层区由2个楼层组成  

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

        （3）当页面滚动至出现第一楼层区时，左侧显示出楼层导航

        （4）楼层导航始终固定在浏览器窗口的左侧

        （5）当滚动至对应的楼层时，左侧对应的楼层导航项会由数字变成对应的文字

        （6）单击楼层导航项时，页面也会滚动至对应的楼层

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

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

   8、友情链接区：

        （1）由标题及分类组成

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

   9、页脚区：

        （1）背景颜色为#f3f5f7；由底部导航与版权声明信息组成

        （2）鼠标移入底部导航时，字体颜色发生改变，变为：#07111b

   10、右侧导航：

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

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

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

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

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

规范【3分】

        * 所有图片都放在image或images文件夹下    

        * HTML代码中有适量的注释    

        * 使用组件化编程思想    

网页整体【4分】

        * 页面整体结构使用HTML布局    

        * 网页整体美观，每个区域背景色贯穿整个页面    

        * 网页居中显示    

顶部【7分】

        * 整个区域背景颜色为：#f3f5f7    

        * 左侧登录注册信息，右侧导航项    

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

        * 与下一个区域有直线分割    

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

logo区【7分】

        * 整个区域背景颜色为：#f3f5f7    

        * 左侧logo，右侧搜索框    

        * 中间搜索框要有提示文字    

        * 搜索框与搜索按钮高度要一致    

        * 搜索按钮没有边框，鼠标移入时呈小手状    

导航区【7分】

        * 背景颜色为：#c1043f；    

        * 导航项鼠标移入，字体颜色变成红色，背景色变成黑色    

        * 导鼠标移入导航项时，变成小手状    

        * 导航项之间的距离相等 

banner区域【30分】

        * 商品分类项与导航部分要有重合    

        * 鼠标移入商品类型的各项时，字体与背景均发生改变，背景变为白色，字体红色    

        * 鼠标移入商品的大分类时，字体与背景均发生改变，背景变为白色，字体红色    

        * 鼠标移入商品的大分类时，会在右侧显示各项的小分类内容，鼠标离开商品分类区域，小分类窗口内容消失    

        * 图片每1秒钟切换1次    

        * 当鼠标停留在整个轮播图区域时，图片不进行轮播

        * 当点击右下角的小圆圈时，出现该选项的对应图片    

        * 小圆圈被选中的时候变成白色，边框是深灰色，未被选中的里面是深灰色的颜色，边框是白色    

        * 当图片发生轮播切换时，在不点击小球前提下，相应的小球背景颜色也自动发生变化

        * 单击左边的箭头会切换前一张，单击右边的箭头会切换后一张 

        * 右侧可分为上中下三部分，整个部分要有边框    

        * 鼠标移入每条消息时，字体颜色变成红色    

        * 中间部分，分为三行四列排布，每项要有图片及文字    

        * 下部分为图片，宽度要与上边对齐

楼层区【20分】

        * 当滚动到楼层区时，左侧显示出一个楼层导航  

        * 当滚动至对应的楼层时，左侧对应的楼层导航项会由数字变成文字    

        * 单击楼层导航项时，页面也会滚动至对应的楼层    

        * 楼层的右上边会有3个分类    

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

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

友情链接区【7分】

        * 上个区域之间有直线分割    

        * 整体，居中显示，分为4列    

        * 每列有标题，及分类    

        * 鼠标移入分类时，字体颜色发生改变    

页脚区【5分】

        * 背景颜色为#f3f5f7；内容要居中显示    

        * 有底部导航与版权声明信息。    

        * 底部导航项鼠标移入改变颜色    

        * 各项之间的距离要相等    

右侧导航【10分】

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

        * 鼠标移入每项时，背景改变颜色    

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

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