我想知道如何使用HTML和CSS设计电子邮件模板，并将其整合到电子邮件中。我想效仿其他公司发送确认邮件和通讯时的做法。
如何使用HTML和CSS制作Gmail邮件模板
4
- aritroper
2
这可能更适合在[webapps.se]上。 - user1864610
最为人所知的mailchimp.com - Giannis Grivas
2个回答
7
无论您喜欢手工编写电子邮件，还是使用预先存在的模板，创建HTML电子邮件时需要记住一些规则：
- 在布局中使用表格
- 采用固定宽度定位（非响应式电子邮件）
- 使用像素单位
- CSS的可能性（请参阅下面的CSS终极指南）
- 内联CSS
- 锚链接最佳实践
- 在所有主要客户端上进行测试
- 始终提供基于Web的视图
- 添加图像内容
- 避免进入垃圾邮件文件夹！
- 添加取消订阅选项
查看以下网站以获取有关此主题的更多信息：
CSS终极指南 - 对每个流行的移动、Web和桌面电子邮件客户端的CSS支持进行了全面的分析。
- dippas
5
在我开始工作之前，我使用过的一本非常有用的书籍是：
关于编写电子邮件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" />
<title>Untitled Document</title>
<style type="text/css">
body{-webkit-text-size-adjust:none;}
.ReadMsgBody{width:100%;}
.ExternalClass{width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
</style>
</head>
<body style="padding:0px; margin:0PX;" bgcolor="">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="" style="table-layout:fixed; margin:0 auto;">
<tr>
<td width="640" align="center" valign="top">
<!--Insert content here-->
</td>
</tr>
</table>
</body>
</html>
这包括一些修复，例如在外部使用100%换行表格，这意味着Yahoo！不会使您的电子邮件左对齐，并修复Outlook.com中的行高问题，其中Outlook.com使所有行高都为131％。此处包含的宽度为640，为桌面电子邮件提供固定宽度，通常为600-700像素。
应始终使用表格，表格包含行和列(
<tr>和<td>)。表格可以嵌套在彼此中：<table width="" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
每个表格中的行都需要具有相同数量的列，否则行内的列将需要嵌套在表格中。表格也可以堆叠，因此在
<td> 中，您可以拥有多个表格，这些表格将垂直堆叠而无需行。内容，如文本或图像，放置在 <td> 中。所有 CSS 样式应该是内联的：
<td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:11px; line-height:14px; color:#fffffe; text-align:right; text-decoration:none; font-weight:normal;">Hello</td>
- Pebbs
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接