CSS 入门
Foundation for Emails CSS 版本入门。
Foundation for Emails 通过为您提供一套强大的、经过测试的开箱即用组件，消除了开发 HTML 电子邮件的痛苦。这包括完全响应的网格、按钮、标注、菜单等。
在本入门指南中，我们将下载 Foundation for Emails，构建基本网格，然后内联我们的电子邮件，以便进行测试。
安装
如果尚未下载，请下载 Foundation for Emails 的入门文件。它们包括电子邮件所需的样板 HTML，以及 Foundation 的所有 CSS。
解压缩该文件夹，然后在您选择的文本编辑器中打开它。
文件结构
以下是您获得的文件夹中文件的细分
css/foundation-emails.css：Foundation for Emails CSS。index.html：一个空白的样板文件以开始使用。templates/：一组遵循常见电子邮件布局的预制模板。
我们将从头开始编写一个布局，所以打开 index.html。
样板文件
在 index.html 中，您可以看到使 HTML 电子邮件正常工作所需的样板文件，并注释说明了每个部分的作用。
<!-- Emails use the XHTML Strict doctype -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<!-- The character set should be utf-8 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<!-- Link to the email's CSS, which will be inlined into the email -->
<link rel="stylesheet" href="assets/css/foundation-emails.css">
<style>
<!-- Your CSS to inline should be added here -->
</style>
</head>
<body>
<!-- Wrapper for the body of the email -->
<table class="body" data-made-with-foundation>
<tr>
<!-- The class, align, and <center> tag center the container -->
<td class="float-center" align="center" valign="top">
<center>
<!-- The content of your email goes here. -->
</center>
</td>
</tr>
</table>
</body>
</html>网格基础
Foundation for Emails 包含许多制作 HTML 电子邮件所需的常见元素：网格、排版样式、按钮、标注等。
创建在所有电子邮件客户端中都能正常工作的 HTML 电子邮件所需的标记非常*复杂*，并且涉及编写许多表格。但是，Foundation 的所有组件都在每个主要的电子邮件客户端中都经过了全面测试，包括 Outlook 等有问题的客户端。严格的结构确保您的设计在任何电子邮件客户端中都不会显得格格不入。
让我们从构建一个基本的网格开始。为此，我们需要三个部分：一个容器、一行，然后是一些列。
容器
大多数 Foundation for Emails 组件都是完整的表格，包括容器。在 index.html 的 <center> 标记内，添加此表格代码
<table class="container">
<tr>
<td></td>
</tr>
</table>容器将包装整个电子邮件的正文。它对电子邮件正文应用了最大宽度。每个电子邮件都需要这段样板文件。
行
接下来，让我们从行开始构建网格本身。行将列组合成一个单元。在容器内部，添加此表格
<table class="row">
<tr>
<th></th>
</tr>
</table>列
列将您的布局划分为并排放置的水平部分。在小屏幕上，这些列相互堆叠以节省空间，除非您将它们设置为在小屏幕上保持其布局。
在您的行（最里面的 <tr>）中，使用以下代码添加一列
<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="expander"></th>
</tr>
</table>在上面的示例中，我们使用了 .small-12 和 .large-6 类来定义列在小型和大型电子邮件客户端上的大小。Foundation 使用 12 列网格，因此在移动客户端上，该列会延伸到页面的整个宽度，而在桌面客户端上，该列是行宽的一半。
由于第一列是半宽，因此我们需要第二列与其一起使用。*在*第一列的 <th> *之后*，添加第二列的代码
<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="small-12 large-6 last columns">
Column Two
</th>
<th class="expander"></th>
</tr>
</table>您可能已经注意到列上的 .first 和 .last 类。行中的第一列需要 .first 类，而行中的最后一列需要 .last 类。网格文档的第一个和最后一个类部分对此进行了更详细的说明。
HTML 代码真多！让我们从高层次上看一下它是什么
<!-- Container -->
<!-- Row -->
<!-- Column One -->
<!-- Column Two -->CSS 类始终位于最外面的表格元素上，因此这是一种识别组件从哪里开始的简单方法。容器从带有 .container 类的表格开始，行从带有 .row 类的表格开始，依此类推。
内联
现在我们有了一个基本的电子邮件，在我们可以发送它之前，我们需要做的最后一件事是将其*内联*。这是将电子邮件的所有 CSS 注入到 HTML 中的过程，以便它作为一个自包含文件工作。
像 Gmail 和 Outlook 这样的电子邮件客户端会从电子邮件的 <head> 中删除 <style> 标记，而 Gmail 也会从电子邮件的 <body> 中删除它。最好将您的 CSS 内联写在您的标记中。手动将所有 CSS 内联写入样式标签将非常痛苦，并且需要很长时间。
我们的网络内联器可以为您自动执行此过程。要使用它，请将 index.html 的内容粘贴到“HTML”字段中，将 css/foundation-emails.css 的内容粘贴到“CSS”字段中，然后按“内联！”。完成后，您将看到一大堆 HTML，这是您的内联电子邮件。
您的电子邮件的 CSS 将包含用于响应式样式的媒体查询，内联工具会将这些媒体查询移动到 <body> 中，以便保留它们。
测试
现在您有了一封内联电子邮件，您需要在真实的电子邮件客户端中对其进行测试，以验证它是否看起来正确。Foundation 的所有内置组件都已在每个主要的电子邮件客户端中进行了测试，因此我们已经为您完成了大量工作。但是，您需要在将电子邮件发送给大众之前对其进行测试。
最流行的电子邮件测试工具是Litmus。您所要做的就是粘贴电子邮件的 HTML，您就可以在您想要的任何电子邮件客户端中获得实时预览。
您可以选择要测试的电子邮件客户端，但您可以查看我们的兼容性列表以获取建议。
后续步骤
您已成功安装 Foundation for Emails，并编写、内联和测试了您的第一封电子邮件！要继续使用该框架，您可以查看其他框架组件的文档，包括按钮、标注、菜单。
如果您有兴趣与 Foundation 团队一起深入了解该框架，请查看我们关于 Foundation for Emails 的大师班，这是一个按需视频系列，探讨了电子邮件设计工作流程的各个方面。
