如何爲使用HTML和CSS的Gmail創建電子郵件模板

<!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％的包裹臺，這意味着雅虎不會將您的電子郵件與Outlook.com中的行高問題保持一致，其中Outlook.com使所有行高度達到131％。這裏包含的寬度是640，這給電子郵件一個固定的寬度的桌面，通常是600-700px。

應始終使用表格，表格包含行和列（<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>

來源

2014-10-07 13:12:04 Pebbs

如何爲使用HTML和CSS的Gmail創建電子郵件模板

回答

相關問題