创建花哨的信头纸
如果您想留下良好的印象,在漂亮的信头纸上写信是一个非常好的开始。在本评估中,我们将挑战您创建一个在线模板来实现这样的外观。
先决条件 | 在尝试本评估之前,您应该已经完成了本模块中的所有文章。 |
---|---|
目标 | 测试对 CSS 盒子模型和其他与盒子相关的功能(例如实现背景)的理解。 |
起点
项目简介
您已获得创建信头纸模板所需的文件。您只需要将这些文件组合在一起。要做到这一点,您需要
主信函
- 将 CSS 应用于 HTML。
- 向信函添加背景声明,该声明
- 将顶部图像固定到信函的顶部
- 将底部图像固定到信函的底部
- 在前面两个背景的顶部添加一个半透明渐变,使信函具有一定的纹理。使其在顶部和底部附近略微变暗,但在中间大部分区域完全透明。
- 添加另一个背景声明,该声明仅将顶部图像作为信函顶部的背景,作为不支持先前声明的浏览器的后备方案。
- 向信函添加白色背景颜色。
- 向信函添加 1 毫米的顶部和底部实线边框,颜色与其余颜色方案保持一致。
徽标
- 向 h1 添加徽标作为背景图像。
- 向徽标添加滤镜以使其具有微妙的投影。
- 现在注释掉滤镜,并以另一种(稍微更兼容跨浏览器)的方式实现投影,该方式仍然遵循圆形图像的形状。
提示和技巧
- 请记住,您可以通过首先放置声明的后备版本,然后放置仅在较新浏览器中有效的版本来为旧版浏览器创建后备方案。旧版浏览器将应用第一个声明并忽略第二个声明,而较新浏览器将应用第一个声明,然后使用第二个声明覆盖它。
- 如果您愿意,可以为评估创建自己的图形。