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

一、语言和环境
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分】
* 白云的位置以及形状的设置