HTML 通讯模板

Question

我想创建一份 HTML 时事通讯，但在 Outlook 中发送的邮件不适合 CSS 我写的：

以下代码在 Outlook 中没有影响

body {
    font-family: verdana !important;
    font-size: 12px !important;
    margin: 0;
    padding: 0;
}

.overheader {
    height: 5px;
    background-color: #e6007e;
    width: 100%;
}
.ce-bodytext {
    font-family: verdana !important;
    font-size: 12px !important;
}

我尝试使用内联 CSS，但无济于事：

<div class="wrapper content" style="width: 100%">
   <div class="design" style="width: 70%; margin: auto;">

问题是什么？我该如何更改代码才能使 CSS 和 HTML 在浏览器、Outlook 以及其他网络邮件程序中正常工作？

Answer 1

不要使用类，因为或多或少所有电子邮件客户端都会删除 html head 元素及其中的所有元素，例如脚本和样式 sheet 链接。

这里是如何使用居中的 70% 宽的内部元素实现 100% 的主宽度，就像您发布的示例 html，虽然我在这里使用了 table，因为那是 best/safest html 邮件的布局方式，即使在 2016 年也是如此。

<table bgcolor="#aaa" border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td align="center">
      <table bgcolor="#eee" border="0" cellpadding="0" cellspacing="0" width="70%">
        <tr>
            <td style="font-size: 26px; font-family: arial">
               Some text...
            </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

HTML 通讯模板

HTML Newsletter Template

html

css

outlook

newsletter