绘制蓝天白云草原效果图
项目作业 198
等1370人参与
来源: / CSS3转换

小伙伴们,我们学习了 CSS3中的渐变、圆角和转换,那么现在我们来运用所学的知识来绘制一幅美丽的蓝天白云草原效果图吧。

效果图如下:

http://img1.sycdn.imooc.com/climg//5848fc33000112a905000242.jpg

作业描述

一、语言和环境

    1) 实现语言

        HTML、CSS3

    2)环境要求及开发工具

        建议使用Sublime Text

二、网页整体要求:

    1)要求页面效果与效果图的效果类似,全屏显示,并且蓝天和草地的高度比为:(6:4)结构布局相似。

    2)要求HTML代码和CSS代码书写、命名符合规范,在代码中添加必要的注释。

    3)所有的文件放到相应的文件夹中,css文件放到css文件夹下。

三、 具体要求

    1)整体分块:

    首先我们需要添加两个块元素,并且分别以天蓝色渐变和草绿色为背景,模拟天空和草地效果,并给

块元素设置宽和高,以铺满整个屏幕。

    天空的颜色为 rgb(196, 228, 253)

    草地的颜色为 rgb(148, 190, 89)

    2)白云的布局

    在天空模块中创建五个子模块,给予白色填充。分别用伪元素、圆角、绝对定位、转换等方法将五个子模块拼凑为五朵云彩。

    白云的颜色为 #FFFFFF。

    3)白云的细节制作

    分别对五个子模块设置不同的定位及其缩放大小。


评分标准是什么?

规范【10分】   

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

    *  HTML和CSS代码规范及添加适量注释。    

整体要求【10分】

    *画面内容要求全屏显示并且蓝天和草地的高度比例为蓝天:草地=6:4

蓝天【25分】    

    * 蓝天的结构与渐变颜色 

草地【25分】

    *草地的位置与渐变颜色

白云【30分】

    * 白云的位置以及形状的设置    


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

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

微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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