项目作业 2434
等2168人参与
来源: / 网页布局案例

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

效果图如下:(详情大图可在“作业素材”中下载获取)

//img1.sycdn.imooc.com//climg/5acb023c000132fb05000652.jpg具体效果及样式可以参考下列视频,点击即可观看!

演示视频
作业描述

一、语言和环境

      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分】

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

作业素材
下载素材

作业素材仅供学习与参考,请按要求完成作业

项目作业上传说明
第1步:上传你的作业压缩包
第2步:等待讲师一对一批复
第3步:查看讲师点评
上传作业

登录后查看更多作业,立即

意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师