【项目作业】校园网首页开发
项目作业 6026
等14人参与

小伙伴们,掌握了HTML、CSS和JavaScript等基础内容,接下来,运用所学知识完成如下图所示的HTML网页开发。

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

//img1.sycdn.imooc.com//climg/5c22f0670001dba605000850.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

       提示:用于遮罩的div可以设置背景颜色为黑色,透明度属性opacity为0.4

ABOUT区【40分】

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

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

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

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

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

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

      提示:图片上方文字所在的div有透明效果,可以设置该div的背景色为:rgba(255, 255, 255, 0.4);

GALLERY区【10分】

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

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

页脚区【4分】

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


作业素材
下载素材

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

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

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

批复案例

整体效果
根据作业要求,每个区域背景宽度相对于浏览区100%显示,所以建议设置整体的宽度为100%。如下图所示,可以设置width属性使用100%
图片描述
页面中其余元素属性的修改,参考如上完成。
logo区
根据作业要求,导航栏始终固定在页面的顶部,不随页面滚动,同学的作业中并没有将导航栏固定在顶部。
修改建议:在header中设置固定定位fixed,并通过z-index展示在最顶层。修改后的代码如下:
图片描述
banner区
1、经过上面的修改,banner会因为设置了定位导致banner向上移动被header覆盖一部分,建议将banner向下移动一部分,修改后的代码如下:
图片描述
bottom区
这里图片并没有100%展示,当屏幕增大,容易导致图片之间出现间距。
图片描述
建议设置img为100%展示,修改后的代码如下:
图片描述
修改后效果如下:
图片描述

评论
展开评论
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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