制作精美的信头纸

如果你想给人留下正确的印象，在漂亮的信头纸上写一封信可能是一个很好的开始。在此评估中，我们将要求你创建一个在线模板来实现这样的外观。

¥If you want to make the right impression, writing a letter on nice letterheaded paper can be a really good start. In this assessment we'll challenge you to create an online template to achieve such a look.

先决条件：	在尝试进行此评估之前，你应该已经阅读了本模块中的所有文章。
目标：	测试对 CSS 盒模型以及其他盒相关功能（例如实现背景）的理解。

初始点

¥Starting point

要开始此评估，你应该：

¥To get this assessment started, you should:

制作 HTML 和 CSS 的本地副本 - 将它们另存为 index.html 和 style.css 在新目录中。
将 top、bottom 和 logo 图片的本地副本保存在与代码文件相同的目录中。

或者，你可以使用在线编辑器，例如 CodePen、JSFiddle 或 Glitch。你可以将 HTML 粘贴并填写 CSS 到这些在线编辑器之一。

¥Alternatively, you could use an online editor such as CodePen, JSFiddle, or Glitch. You could paste the HTML and fill in the CSS into one of these online editors.

注意：如果你遇到困难，可以通过我们的沟通渠道之一与我们联系。

¥Note: If you get stuck, you can reach out to us in one of our communication channels.

工程概要

¥Project brief

你已获得创建信头纸模板所需的文件。你只需要将文件放在一起即可。要到达那里，你需要：

¥You have been given the files needed to create a letterheaded paper template. You just need to put the files together. To get there, you need to:

主要信件

¥The main letter

将 CSS 应用到 HTML。
在信中添加背景声明：
- 将顶部图片固定到字母顶部
- 将底部图片固定到字母底部
- 在之前的两个背景的顶部添加半透明渐变，为字母提供一些纹理。使其顶部和底部附近稍微变暗，但中心的大部分区域完全透明。
添加另一个背景声明，仅将顶部图片添加到字母顶部，作为不支持先前声明的浏览器的后备。
为信件添加白色背景颜色。
在字母上添加 1 毫米的顶部和底部实心边框，其颜色与其余配色方案保持一致。

标志

¥The logo

在 h1 中，添加徽标作为背景图片。
向徽标添加滤镜，为其添加微妙的阴影。
现在注释掉过滤器并以不同的（跨浏览器兼容程度更高）的方式实现投影，它仍然遵循圆形图片的形状。

提示和技巧

¥Hints and tips

请记住，你可以通过首先放置声明的后备版本，然后放置仅适用于较新浏览器的版本来为旧浏览器创建后备。较旧的浏览器将应用第一个声明并忽略第二个声明，而较新的浏览器将应用第一个声明，然后用第二个声明覆盖它。
如果你愿意，可以随意创建自己的评估图形。

示例

¥Example

以下屏幕截图显示了最终设计的示例：

¥The following screenshot shows an example of what the finished design could look like: