0

我有一个电子邮件模板的设计，我正在修改处理 HTML/CSS 中以下元素样式的最佳方法。注意几点：

  • 由于它是用于 HTML 电子邮件，因此将主要使用表格。
  • 使用负边距可能与不同的邮件客户端不兼容。
  • 注意按钮周围的白色边框

你会推荐为整个区块使用背景图片吗？或者是否有一种优雅的方式看起来像这样并且适用于客户。

这是我的设置：http: //jsfiddle.net/ZHkdV/

在此处输入图像描述

4

3 回答 3

1

对于电子邮件模板，您不必担心验证，因此您可以使用漂亮的 'hacky' html。客户端兼容性的一种方法是让每一行本身都是一个表，设置在一个主“包装”表中。

然后，您可以在每个分区中设置任意多个分区，记住要重置每个表格、行和单元格的边框。

每个单元格都有自己的图像或图像切片。对于最后一行，您可以简单地在锚标记中放置一个图像。还要记住保持内联元素的所有样式。

html 电子邮件样板文件几乎是防弹的。

http://htmlemailboilerplate.com/

<table> <!- Wrapper ->
    <tr>
    <td>
    <table>
    <tr>
    <td>
    </td>
    </tr>
    </table>
    </td>
    </tr>

</table>
于 2013-06-19T14:28:41.143 回答
1

给你 - 顶角只需要一个 30x30 的图像：

<table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#F1F1F1">
  <tr>
    <td width="30" height="30">
      <img style="margin: 0; border: 0; padding: 0; display: block;" src="" width="30" height="30" alt="">
    </td>
    <td width="240" height="30">&nbsp;
    </td>
    <td width="30" height="30">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="30" height="160">&nbsp;
    </td>
    <td width="240" height="160" valign="top">
      <font style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #757575;">
      &nbsp;<br>
      some text here
      </font>
    </td>
    <td width="30" height="160">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="300" height="40" colspan="3" bgcolor="#FFFFFF"><!-- undeclared light gray as Outlook can add spaces at bottom of this td on forwarding (hides unwanted line) -->
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="50" height="20" bgcolor="#F1F1F1">&nbsp;
          </td>
            <a href="" style="color: #757575; font-weight: bold; text-decoration: none;"><!-- css button, you can lose this and put a href'd image in the cell if you prefer. -->
            <td width="200" height="40" bgcolor="#CBBCDC" rowspan="2" valign="middle" align="center">
            <font style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #757575;">
            BUTTON
            </font>
          </td>
          </a>

          <td width="50" height="20" bgcolor="#F1F1F1">&nbsp;
          </td>
        </tr>
        <tr>
          <td width="50" height="20" bgcolor="FFFFFF">&nbsp;
          </td>
          <td width="50" height="20" bgcolor="FFFFFF">&nbsp;
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

这应该适用于所有客户......

于 2013-06-19T17:34:24.180 回答
0

背景图像也不是很兼容：

http://www.campaignmonitor.com/css/

我只需将最后一行分成 3 个单独的图像（左、按钮、右）。

如果您希望整行都使用一张图片，您还可以使用图片映射将按钮部分设为链接。

于 2013-06-19T14:00:13.077 回答