本文详细介绍了创建HTML/CSS电子邮件模板的步骤，包括创建标题、响应式行、单列文本和图像，以及针对移动设备的优化。通过遵循这些步骤，可以确保电子邮件在不同设备上展示良好，同时提供了验证代码有效性的建议。
As we know, websites widely use email for mass mailing of news and other messages. This is one of the main means of delivering information. The letter itself plays a big role – many things depend on it: from the initial understanding the importance of website and even trust level of website. Today we look at the process of creating markup for the letter. The process of creating HTML/CSS email templates starts with working on a XHTML doctype that will look like:
众所周知，网站广泛使用电子邮件来大量发送新闻和其他消息。 这是传递信息的主要手段之一。 这封信本身起着很大的作用-许多事情取决于它：从最初的了解，网站的重要性甚至网站的信任度。 今天，我们看一下为这封信创建标记的过程。 创建HTML / CSS电子邮件模板的过程始于处理如下的XHTML文档类型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {margin: 0; padding: 0; min-width: 100%!important;}
.content {width: 100%; max-width: 600px;}
</style>
<title>basic html Email</title>
</head>
<body bgcolor="#eef0e8">
<table width="100%" bgcolor="#eef0e8" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table class=" content" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
Header example
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {margin: 0; padding: 0; min-width: 100%!important;}
.content {width: 100%; max-width: 600px;}
</style>
<title>basic html Email</title>
</head>
<body bgcolor="#eef0e8">
<table width="100%" bgcolor="#eef0e8" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table class=" content" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
Header example
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
It is a basic page with the header, doctype and container table with a background color applied to the body. The class on content defines the main content table.
这是一个基本页面，带有标题，文档类型和容器表，并且将背景颜色应用于正文。 内容类定义了主要内容表。
创建标题 (Creating the header)
It is time to add the first row of our table as header. For the same, add the below given style to the row that we have already created.
现在该添加表的第一行作为标题了。 同样，将以下给定样式添加到我们已经创建的行中。
<td class="header" bgcolor="#bed691">
Header example
</td>
<td class="header" bgcolor="#bed691">
Header example
</td>
Now it is the time to add CSS and then padding for the header will go like:
现在是时候添加CSS了，然后标题的填充如下：
.header {padding: 30px 25px 18px;}
.header {padding: 30px 25px 18px;}
包括第一响应行 (Including the first responsive row)
It is time to add the first responsive row. We will be creating two tables by using align HTML property.
现在该添加第一响应行了。 我们将使用align HTML属性创建两个表。
Left Column
左栏
Here, we are going to replace the ‘Header example’ label with the following markup:
在这里，我们将用以下标记替换“标题示例”标签：
<table width="70" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="70" style="padding: 0 20px 20px 0;">
<img src="images/icon.png" width="70" height="70" border="0" alt="" / >
</td>
</tr>
</table>
<table width="70" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="70" style="padding: 0 20px 20px 0;">
<img src="images/icon.png" width="70" height="70" border="0" alt="" / >
</td>
</tr>
</table>
The padding to the bottom text will work to provide vertical breathing room when the two columns will be viewed on mobile.
当在移动设备上查看两列时，底部文本的填充将提供垂直的呼吸空间。
Right column
右栏
By aligning a table to the left, we will now be creating the right column. Our ideal table length will be 445px wide, which will provide 25px extra space to spare on right hand side. This alignment is important so that your HTML email template could easily be viewed over email clients such as outlook.
通过将表格左对齐，我们现在将创建右列。 我们理想的桌子长度应为445像素宽，这将在右侧保留25像素的额外空间。 这种对齐方式很重要，这样您HTML电子邮件模板就可以轻松地通过电子邮件客户端(例如Outlook)查看。
On the right hand table, similar approach will be used that includes developing a class and then adding a class along with conditioner wrapper code. Additionally, we will make the table responsive so that it could appear 100% wide on mobile.
在右边的表上，将使用类似的方法，包括开发一个类，然后添加一个类以及调节器包装器代码。 此外，我们将使表格具有响应性，以便它在移动设备上的显示宽度可能为100％。
<!--[if (gte mso 9)|(IE)]>
<table width="430" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="column" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 430px;">style="width: 100%; max-width: 430px;">
<tr>
<td height="70">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<table width="430" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="column" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 430px;">style="width: 100%; max-width: 430px;">
<tr>
<td height="70">
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
Inside the cell, we will add styled heading, as:
在单元格内部，我们将添加样式标题，如下所示：
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="subhead" style="padding: 0 0 0 3px;">
Lorem ipsum dolor
</td>
</tr>
<tr>
<td class="h1" style="padding: 5px 0 0 0;">
Lorem ipsum dolor sit amet, consectetur
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="subhead" style="padding: 0 0 0 3px;">
Lorem ipsum dolor
</td>
</tr>
<tr>
<td class="h1" style="padding: 5px 0 0 0;">
Lorem ipsum dolor sit amet, consectetur
</td>
</tr>
</table>
With this last table, the header is now completed and addition of responsive element ensures that the template will easily scale on the mobile device too.
在最后一张表中，标题现已完成，并且添加了响应元素，确保模板也可以轻松在移动设备上扩展。
设计单列文本行 (Designing single column text row)
It just requires adding a new row to the content table to add single column text row. We need to add an innerpadding class to these rows. A class of borderbottom will also be added to include a border to each row, such as:
它只需要向内容表添加新行即可添加单列文本行。 我们需要向这些行添加一个innerpadding类。 还将添加一个borderbottom类，以在每行包括一个边框，例如：
<tr>
<td class="innerpadding borderbottom">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="h2">
Lorem ipsum dolor sit amet, consectetur
</td>
</tr>
<tr>
<td class="bodycopy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="innerpadding borderbottom">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="h2">
Lorem ipsum dolor sit amet, consectetur
</td>
</tr>
<tr>
<td class="bodycopy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
</table>
</td>
</tr>
CSS for this section will be embedded as:
本节CSS将嵌入为：
.innerpadding {padding: 30px;}
.borderbottom {border-bottom: 1px solid #f9f1ef;}
.h2 {padding: 0 0 15px 0; font-size: 24px; line-height: 26px; font-weight: bold;}
.bodycopy {font-size: 16px; line-height: 22px;}
.innerpadding {padding: 30px;}
.borderbottom {border-bottom: 1px solid #f9f1ef;}
.h2 {padding: 0 0 15px 0; font-size: 24px; line-height: 26px; font-weight: bold;}
.bodycopy {font-size: 16px; line-height: 22px;}
Working on double column article
处理双列文章
Here we will be working on creating a responsive row as we worked on the header. This table will have different dimension, so as to include larger images.
在这里，我们将像创建标题一样努力创建响应式行。 该表将具有不同的尺寸，以便包含更大的图像。
<tr>
<td class="innerpadding borderbottom">
<table width="115" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="115" style="padding: 0 20px 20px 0;">
<img src="images/article1.png" width="115" height="115" border="0" alt="" />
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<table width="380" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col380" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 380px;">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bodycopy">
Lorem ixapsum dolor sit amet, cxaonsectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
<tr>
<td style="padding: 20px 0 0 0;">
<table class="buttonwrapper" bgcolor="#dc4937" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="button" height="45">
<a href="#">Claim yours!</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td class="innerpadding borderbottom">
<table width="115" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="115" style="padding: 0 20px 20px 0;">
<img src="images/article1.png" width="115" height="115" border="0" alt="" />
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<table width="380" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col380" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 380px;">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bodycopy">
Lorem ixapsum dolor sit amet, cxaonsectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
<tr>
<td style="padding: 20px 0 0 0;">
<table class="buttonwrapper" bgcolor="#dc4937" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="button" height="45">
<a href="#">Claim yours!</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
CSS style for this button will appear as:
此按钮CSS样式将显示为：
.button {text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;}
.button a {color: #ffffff; text-decoration: none;}
.button {text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;}
.button a {color: #ffffff; text-decoration: none;}
显影单列图像 (Developing single column image)
In order to create single column image, we only require to set image that is 100% (width) of the email. Set the height automatically using CSS.
为了创建单列图像，我们只需要将图像设置为电子邮件的100％(宽度)即可。 使用CSS自动设置高度。
<tr>
<td class="innerpadding borderbottom">
<img src="images/image.png" width="100%" border="0" alt="" />
</td>
</tr>
<tr>
<td class="innerpadding borderbottom">
<img src="images/image.png" width="100%" border="0" alt="" />
</td>
</tr>
And for CSS, use
对于CSS，请使用
img {height: auto;}
img {height: auto;}
处理最终文本行 (Working on final text row)
Now, it is time to add row of text without border on bottom, like:
现在，是时候在底部添加没有边框的文本行了，例如：
<tr>
<td class="innerpadding borderbottom">
Loxrem ipsczum dolor sit amet, consczectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
<tr>
<td class="innerpadding borderbottom">
Loxrem ipsczum dolor sit amet, consczectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
在页脚上工作 (Working on the footer)
In order to create footer, it is important to add a new table row inside. We will also be adding another table for social media icons.
为了创建页脚，在内部添加新表行很重要。 我们还将为社交媒体图标添加另一个表格。
<tr>
<td class="footer" bgcolor="#44525f">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="footercopy">
&reg; Someone, somewhere 2013<br/>
<a href="#"><font color="#ffffff">Unsubscribe</font></a> from this newsletter instantly
</td>
</tr>
<tr>
<td align="center" style="padding: 20px 0 0 0;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="37" style="text-align: center; padding: 0 10px 0 10px;">
<a href="http://www.facebook.com/">
<img src="images/facebook.png" width="37" height="37" alt="Facebook" border="0" />
</a>
</td>
<td width="37" style="text-align: center; padding: 0 10px 0 10px;">
<a href="http://www.twitter.com/">
<img src="images/twitter.png" width="37" height="37" alt="Twitter" border="0" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="footer" bgcolor="#44525f">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="footercopy">
&reg; Someone, somewhere 2013<br/>
<a href="#"><font color="#ffffff">Unsubscribe</font></a> from this newsletter instantly
</td>
</tr>
<tr>
<td align="center" style="padding: 20px 0 0 0;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="37" style="text-align: center; padding: 0 10px 0 10px;">
<a href="http://www.facebook.com/">
<img src="images/facebook.png" width="37" height="37" alt="Facebook" border="0" />
</a>
</td>
<td width="37" style="text-align: center; padding: 0 10px 0 10px;">
<a href="http://www.twitter.com/">
<img src="images/twitter.png" width="37" height="37" alt="Twitter" border="0" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
The required CSS style will come up as:
所需CSS样式将显示为：
.footer {padding: 20px 30px 15px 30px;}
.footercopy {font-family: sans-serif; font-size: 14px; color: #ffffff;}
.footercopy a {color: #ffffff; text-decoration: underline;}
.footer {padding: 20px 30px 15px 30px;}
.footercopy {font-family: sans-serif; font-size: 14px; color: #ffffff;}
.footercopy a {color: #ffffff; text-decoration: underline;}
针对移动设备进行优化 (Optimizing for mobile)
Instead of using plain text, it is suggested to use whole button links. Tapping a whole link is much easier than pressing a tiny link with your finger. For this link to work well on diverse email clients, the coding will go as:
建议不要使用纯文本，而应使用整个按钮链接。 轻敲整个链接比用手指按一个小链接要容易得多。 为了使此链接在各种电子邮件客户端上都能正常运行，编码如下：
@media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
body .buttonwrapper {background-color: transparent!important;}
body .button a {background-color: #dc4937; padding: 15px 15px 13px!important; display: block!important;}
@media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
body .buttonwrapper {background-color: transparent!important;}
body .button a {background-color: #dc4937; padding: 15px 15px 13px!important; display: block!important;}
最终程序 (The final procedure)
As the entire coding has been done, it is now time to ensure the validity of the codes by using W3C validator. Checking the codes is an important step to ensure the tags have been developed flawlessly.
由于完成了整个编码，现在该通过使用W3C验证程序来确保代码的有效性了。 检查代码是确保标签完美开发的重要步骤。
结论 (Conclusion)
After you are done with the procedure that has been discussed above, you can successfully create HTML email templates. In case, you are not able to perform the coding successfully, professional help is easily available to a number of service providers. A little research in this direction can help you to hire exceptional service providers.
完成上面讨论的过程之后，您可以成功创建HTML电子邮件模板。 如果您无法成功执行编码，许多服务提供商将很容易获得专业帮助。 在这个方向上进行一些研究可以帮助您雇用出色的服务提供商。
翻译自: https://www.script-tutorials.com/steps-to-successfully-create-htmlcss-email-template/
1524
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
