[英]How to make an email template for gmail using HTML and CSS
I was wondering how I could design an email template using HTML and CSS and then incorporate that into an email. 我想知道如何使用HTML和CSS设计电子邮件模板,然后将其合并到电子邮件中。 I want to do it as other companies do when they send confirmation emails and newsletters.
我想像其他公司发送确认电子邮件和新闻通讯时那样做。
Whether you prefer to code an email by hand, or use a pre-existing template, there are a few rules to keep in mind in creating an HTML email: 无论您是希望手动编写电子邮件,还是使用预先存在的模板,在创建HTML电子邮件时都要记住以下几条规则:
Take a look at these sites for more info on this subject: 有关此主题的更多信息,请查看这些网站:
How to Code HTML Email Newsletters 如何编码HTML电子邮件简报
9 Tricks to Design The Perfect HTML Newsletter 9设计完美HTML时事通讯的诀窍
How To Code An Email Newsletter in 6 Simple Steps 如何通过6个简单步骤编写电子邮件简报
The Ultimate Guide to CSS - A complete breakdown of the CSS support for every popular mobile, web and desktop email client CSS终极指南 - 对每个流行的移动,Web和桌面电子邮件客户端的CSS支持的完整细分
A very useful book that I used before I start a job is: 我在开始工作之前使用的一本非常有用的书是:
Modern HTML Email - Jason Rodriguez 现代HTML电子邮件 - 杰森罗德里格兹
There are very few books on writing HTML for email, so this is one of the only decent ones I found! 关于为电子邮件编写HTML的书很少,所以这是我发现的唯一正确的书之一!
Whenever I start making an email, I use a starting point such as this below: 每当我开始发电子邮件时,我都会使用如下所示的起点:
<!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>
This includes some fixes, such as a 100% wrapping table on the outside which means that Yahoo! 这包括一些修复,例如外部的100%包装表,这意味着Yahoo! will not left align your email and a fix for the line-height issue in Outlook.com, where Outlook.com makes all line-heights 131%.
不会在Outlook.com中调整您的电子邮件和修复行高问题,其中Outlook.com的所有行高为131%。 The width included in here is 640, which gives the email a fixed width for desktop and is normally 600-700px.
此处包含的宽度为640,这为电子邮件提供了固定的桌面宽度,通常为600-700px。
Tables should be used at all times, and tables contain rows and columns ( <tr>
and <td>
). 表应始终使用,表包含行和列(
<tr>
和<td>
)。 Tables can be nested within eachother: 表可以嵌套在一起:
<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>
Each row within a table needs to have the same number of columns, otherwise columns within a row will need to be nested within a table. 表中的每一行都需要具有相同的列数,否则行中的列将需要嵌套在表中。 Tables can also be stacked, so within a
<td>
, you can have multiple tables that will stack vertically without the need of rows. 表也可以堆叠,因此在
<td>
,您可以拥有多个垂直堆叠的表,而不需要行。 The content, such as text or images goes within a <td>
. 文本或图像等内容属于
<td>
。
All CSS styling should be inline: 所有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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.