贡献菜谱
如果您想为布局食谱贡献示例，则此页面说明了发布示例所需的步骤。
什么构成一个好的菜谱？
**任何有用的网页设计模式的最简单版本**。您包含的每一行 CSS 都应该有助于演示该模式，因此请省略任何仅用于使示例看起来更漂亮的代码。其理念是，任何人都可以采用该模式并在自己的网站中使用其自己的样式。
一个配方包括
- 一个实时示例，存储在CSS Examples GitHub 存储库中。
- 该示例的可下载版本，也存储在 CSS Examples 存储库中。
- 站点CSS 布局食谱部分中的一个页面，其中应包含以下组件
- 简介
- 需求
- 配方
- 决策
- 有用的回退或替代方法（在相关时）
- 无障碍问题
- 浏览器兼容性（仅适用于未完全支持的 CSS 属性）
- 其他资源
发布菜谱的步骤
要创建配方并将其添加到 CSS 布局食谱中，请按照以下步骤操作
1. 构建模式
在将您的示例转换为配方之前，请先将您的模式创建为一个基本的 HTML 页面。考虑您要演示的内容，并使其尽可能简单。如果添加类名，请使用描述性词语，如“容器”或“项目”。
确保您已在多个浏览器、视口大小和设备上测试了 HTML 和 CSS。还要确保任何 CSS 样式都遵循无障碍指南。虽然可以使用支持有限的 CSS 属性，但在创建页面时请务必包含浏览器支持信息，尤其是在浏览器兼容性部分。在某些情况下，创建带有回退支持的示例的第二个版本可能会有所帮助。
2. 创建实时示例
食谱页面上的实时示例，例如居中元素以及 MDN 上的其他地方，允许读者使用代码并更改相关部分，而不会被所有代码淹没。您的配方将通过一个或多个示例进行演示。
首先，**Fork** CSS 示例库，然后查看 css-cookbook 文件夹。其中有一个 cookbook-template.html 文件。复制此文件并将其用作起点。将此文件保存到 css-cookbook 目录中，并使用一个与你的样式相关的文件名。模板中包含一些注释，可以指导你在适当的位置添加各个部分。
此模板的重要部分如下：
- 其中包含一个用于编辑器面板的样式表，其中包含一些基本的正文样式，以及一个用于编辑器功能的 JavaScript 文件。请保持这些文件不变。
<head>包含两个样式块。第一个样式块用于读者无需更改即可体验示例的元素。第二个样式块包含读者可能想要修改的项目。我们通常将所有 CSS 添加到第一个块中，然后选择要移动到第二个块的规则。第二个块中的规则应该是样式的基本规则，例如，读者可以更改 CSS 值并查看样式更新的规则。- 你需要将组件的 HTML 代码添加两次：第一次添加到具有
preview类的 section 中，第二次添加到具有playable-html类的<textarea>中。 - 第二个
<head>块中可编辑的 CSS 也必须复制到playable-css部分。
一个简单的运行示例是 center.html，它嵌入在页面 居中元素 中。你可以使用它来了解如何正确添加各个部分。
如果你已经 fork 了库，并且拥有包含你的示例的 CSS 和 JavaScript 文件，那么在浏览器中打开你的实时示例应该会显示所有内容都正常工作，就像在 MDN 页面上显示的那样。
一些有用的提示：
- 不要缩进
textarea内部的 CSS 和 HTML 代码；相反，请将代码与行的开头对齐。这样在渲染时会更美观。 - 如果需要任何图像，请将其放在包含示例的目录中。欢迎使用任何已有的图像。
- 你可以通过更改内联样式中的高度来调整
textarea的高度。
3. 创建可下载版本
由于示例包含我们所有实时示例代码，因此我们希望为读者提供他们示例所需的代码，并省略任何不必要的项目。复制你的实时示例，并在其名称中添加 --download。例如，center.html 的下载版本为 center--download.html。此文件将类似于你的初始示例。它应该是你的样式的基本版本，作为一个单独的 HTML 页面。
包含我们包含样式表中的正文 CSS 规则会很有帮助。参考 cookbook-template--download.html 作为指导；这些规则作为起点提供。