小伙伴们，掌握了CSS样式的设置，那么接下来，运用所学知识完成如下图所示的HTML网页开发。

效果图如下：（详情大图可在“作业素材”中下载获取）

具体效果及样式可以参考下列视频，点击即可观看！

一、语言和环境

      1、实现语言

            HTML、CSS

      2、 环境要求及开发工具

             建议 Sublime text

二、网页整体要求：

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

      2、要求HTML代码和CSS代码书写、命名符合规范，在代码中添加必要的注释，方便后期的维护。

      3、图片文件、css样式文件要放在单独的文件夹中

三、具体要求：  

      1、网页分为以下几部分：顶部、banner区、ABOUT区、GALLERY区、脚区，网页内容居中显示。

      2、Banner区和ABOUT区的下部分展示块

            高度固定，宽度相对于浏览区是100%。

      3、字体及颜色表

     （1）网页字体： Microsoft YaHei UI

     （2）网页中用到的颜色：

规范【4分】

        * 图片文件、css样式文件放到单独的文件夹中。

        * 文件名、id名、class名命名要规范。

        * 代码书写规范、并且添加适量注释，方便后期的维护。

网页整体【8分】

        * 网页内容居中显示。

        * 每个区域宽度相对于浏览器100%显示。

顶部【10分】

        *  与效果图结构基本保持一致；

        * 导航、Logo区有链接效果，无下划线；

        * 鼠标经过相应导航时，颜色发生变化。

        * 导航始终固定在顶部

banner区【24分】

        * 与效果图结构基本保持一致；

        * Banner图区高度固定 , 图片宽度相对于浏览器100%显示。

        *图片上要有半透明的遮罩， 表单内容显示在图像的最上面，且表单要水平居中。

        * 表单项有：姓名、邮件、具体内容、提交按钮。表单项设置用户提示信息。    

        * 鼠标滑过表单各项时，表单项的边框颜色变成#07cbc9。

        * 鼠标滑过提交按钮时，按钮没有边框，背景颜色变成#07cbc9。

ABOUT区【40分】

        * 与效果图结构基本保持一致； 

        * 分为上中下三部分，上部分为标题与文字。

        * 中间部分从左至右为文字、图片、文字三部分，要求中间部分居中显示。

        * 下部分为文字与图片交错显示，要求下部分水平方向平铺浏览器窗口。

        * 中间部分左侧的EXPLORE按钮，鼠标移入时背景变为透明的，但是有黑色的边框。

        * 鼠标划过下部分的文字区域片中的按钮时，按钮的背景颜色为透明色，边框为黑色

GALLERY区【10分】

        * 与效果图结构基本保持一致；

        *上部分为文字描述，下部分为图片展示，图片之间有一定距离，文字的颜色和大小适当设置。 

页脚区【4分】

        * 网页版权信息文本内容垂直水平居中显示。