创建花哨的信头纸

如果您想留下良好的印象,在漂亮的信头纸上写信是一个非常好的开始。在本评估中,我们将挑战您创建一个在线模板来实现这样的外观。

先决条件 在尝试本评估之前,您应该已经完成了本模块中的所有文章。
目标 测试对 CSS 盒子模型和其他与盒子相关的功能(例如实现背景)的理解。

起点

要开始此评估,您应该

  • 创建 HTMLCSS 的本地副本 — 将它们另存为 index.htmlstyle.css,放在新目录中。
  • 顶部底部徽标 图像的本地副本保存在与代码文件相同的目录中。

或者,您可以使用在线编辑器,例如 CodePenJSFiddleGlitch。您可以将 HTML 粘贴到其中一个在线编辑器中,然后填写 CSS。

注意:如果您遇到困难,可以通过我们的 沟通渠道 联系我们。

项目简介

您已获得创建信头纸模板所需的文件。您只需要将这些文件组合在一起。要做到这一点,您需要

主信函

  • 将 CSS 应用于 HTML。
  • 向信函添加背景声明,该声明
    • 将顶部图像固定到信函的顶部
    • 将底部图像固定到信函的底部
    • 在前面两个背景的顶部添加一个半透明渐变,使信函具有一定的纹理。使其在顶部和底部附近略微变暗,但在中间大部分区域完全透明。
  • 添加另一个背景声明,该声明仅将顶部图像作为信函顶部的背景,作为不支持先前声明的浏览器的后备方案。
  • 向信函添加白色背景颜色。
  • 向信函添加 1 毫米的顶部和底部实线边框,颜色与其余颜色方案保持一致。
  • h1 添加徽标作为背景图像。
  • 向徽标添加滤镜以使其具有微妙的投影。
  • 现在注释掉滤镜,并以另一种(稍微更兼容跨浏览器)的方式实现投影,该方式仍然遵循圆形图像的形状。

提示和技巧

  • 请记住,您可以通过首先放置声明的后备版本,然后放置仅在较新浏览器中有效的版本来为旧版浏览器创建后备方案。旧版浏览器将应用第一个声明并忽略第二个声明,而较新浏览器将应用第一个声明,然后使用第二个声明覆盖它。
  • 如果您愿意,可以为评估创建自己的图形。

示例

以下屏幕截图显示了完成的设计示例

Full A4 page composed of at the top left two triangular shapes, first one is green, second one is red, at the top right darker red trapezoid shape. Below the green triangular, a red circle filled with a green star with white text on it: Awesome company. At the bottom left of the page, darker red trapezoid shape, follow by the two triangular shapes: the red one, then the green one. Above the green triangular shape, black text displaying a postal address.