Question

我正在使用Mailchimp和我自己的HTML构建HTML电子邮件广告系列。我听说要构建成功的HTML电子邮件，您必须专注于使用表，并使用内联CSS。我从我的样式中删除了所有填充，并在0度量中添加了边距，填充，边框和轮廓标记。有什么建议吗？真的坚持这个。

<body style="background:blue; margin:0; padding:0; border:0; outline:0;">

<div id="wrap" style="background:green; width:100%;">

<table width="100%">
<tr>
  <td style="
      width:100%; margin:0; padding:0; border:0; outline:0;
      height:100px;
      background:#4b86fc;
      background-size:60px 60px;
      ">
    </td>
  </tr>
</table>

<table width="500" align="center">
<tr>
  <td style="
      padding:20px 0px 25px 0px;
      color:#000; font-family:Verdana, Geneva, sans-serif;
      font-weight:100; font-size:12px;">
      <p>Hi,</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Many Thanks, 
Liam</p></td>
  </tr>
</table>

<table width="100%">
<tr>
  <td style="
      width:100%; margin:0; padding:0; border:0; outline:0;
      background-color:#ebebeb;
      background:#ebebeb;
      border-top:1px solid #c3c3c3;
      font-family:Verdana, Geneva, sans-serif;
      font-weight:100; font-size:11px;
      text-align:center;">
        <ul style="list-style-type:none; margin:0; padding:0;">
        <li style="display:inline; padding:0 8px 0 0;"><a href="" style="text-decoration: none;     color:#545454;">Homepage</a></li>
        <li style="display:inline; padding:0 8px 0 0;"><a href="" style="text-decoration: none;     color:#545454;">Twitter</a></li>
        <li style="display:inline; padding:0 8px 0 0;"><a href="" style="text-decoration: none;     color:#545454;">Dribbble</a></li>
        <li style="display:inline; padding:0 0 0 8px;"><a href="" style="text-decoration: none;     color:#545454;">Facebook</a></li>
</ul>

</td>
</tr>
</table>

</div>

</body>

Answer 1

这将帮助您入门：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">
    #outlook a {padding:0;}
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
    .ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
    a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #000001 !important; pointer-events: auto; cursor: default;}
    table td {border-collapse: collapse;}
  </style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;">

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td>
     content
    </td>
  </tr>
</table>

</td></tr></table></td></tr></table></body></html>

这背景设置为白色（#FFFFFF），这样如果有人转发它，它们将以白色书写。您可以将其更改为任何内容，请记住，没有人想要键入深色。内部表（与<body>标签位于同一行）控制html区域背景颜色的颜色（＃252525）。内容表是您的中心浮动面板。

有关html电子邮件的更多信息，请参阅this thread。

Answer 2

您是否看过html email boilerplate

HTML电子邮件的优秀模板！

我知道这不是问题的直接答案，但我还不能发表评论，抱歉。

Answer 3

默认情况下，大多数浏览器会为 BODY 标记添加边距。因此你需要

<body style="background:blue;margin:0">

摆脱那个边缘。

Answer 4

你有没有尝试过

margin:0;

在正文样式标签中？

Answer 5

您可以为HTML电子邮件中的表格应用100％的宽度

还请考虑以下事项：

1-必须在compose中包含<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />。

2-在<head>处应用mso-line-height-rule: exactly;。像<body>

3-请避免使用<body mso-line-height-rule:exactly;>和<ul>标签，可以使用<li>或任何其他支持的标签。将<p>用作项目符号。

4-使用•代替<table>

5-使用<div>代替<b>。

6-使用嵌套表，而不要使用<strong>或rowspan。

请转到https://www.campaignmonitor.com/css/，以获取有关CSS for Mailer的所有帮助

html电子邮件的100％表格宽度

5 个答案: