【问题标题】:Email Template design issue电子邮件模板设计问题
【发布时间】:2015-07-02 06:17:10
【问题描述】:

我正在使用电子邮件模板设计。我的问题是“模板作为 HTML 布局工作正常。但是当我使用与电子邮件模板相同的模板时,给定的边框颜色会自动变为黑色。”

我的问题是如何克服这个问题。

请帮助我。提前致谢。

<body style="margin:10px 10px 10px 10px; padding:0px 0px 0px 0px; font-family:Arial, Helvetica, sans-serif;">
<table width="645" border="15" bordercolor="#FF0000" cellpadding="0px" cellspacing="0px">
<tr>
<td>
<br><table width="615" border="0" background="img.png" style="background-repeat:no-repeat" >
<tr>
<td width="113" align="left"><img src="img.png" style="display:block;">     
</td>
<td width="498" style="float:right; margin-right:15px;">
<p align="right"><a href=""> <img src="icon_twit.png"> </a>
<a href=""><img src="icon_face.png"></a>
<a href=""><img src="icon_pin.png" ></a>
<a href=""><img src="icon_insta.png" ></a>
</p>
<p>&nbsp;</p></td>
</tr>
<tr>
<td height="135"></td>
</tr>
</table>
<table width="100%">
<tr><td height="25px"></td><td></td><td></td></tr>
<tr>
<td width="5%"></td>
<td width="90%">
<p>
<label style="color:#FF0000; font-size:30px;font-family:Arial, Helvetica, sans-serif">Customer </label>
<label style="color:#333333;font-size:30px;font-family:Arial, Helvetica, sans-serif">newsletter</label>
</p></td>
<td width="5%"></td>
</tr>
<tr><td></td><td><hr color="#FF0000"></td><td></td></tr>
<tr>
<td></td>
<td>
<p style="color:#333333;font-size:16px;font-family:Arial, Helvetica, sans-serif"><b>You have a few options when building the drafts of your newsletter layout, however the  
</b></p></td>
<td></td>
</tr>
<tr><td></td><td><hr color="#FF0000"></td><td></td></tr>
<tr><td></td><td><img src="img1.png"> </td><td></td></tr>
<tr><td height="25px"></td><td></td><td></td></tr>
<tr><td height="25px"></td>
<td>
<label style="color:#FF0000;font-size:18px;font-family:Arial, Helvetica, sans-serif"><b>Win&nbsp;</b></label>
<label style="color:#FF0000;font-size:18px;font-family:Arial, Helvetica, sans-serif">VIP tickets to top festivals!</label>
</td><td></td></tr>
<tr>
<td height="25px"></td>
<td>
<p style="color:#333333;font-size:12px;font-family:Arial, Helvetica, sans-serif;">You have a few options when building the drafts of your newsletter layout, however the best option to follow is to set fixed widths for your containing table.
</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
 </table>
</body>

【问题讨论】:

  • 请出示您的代码
  • 分享您的 HTML 代码(**注意电子邮件模板不是典型的 WEB 页面模板,当您将其作为电子邮件发送时,它的行为会有所不同)
  • 尝试使用基本的 HTML 格式而不是内联 CSS。在某些情况下对我有帮助。

标签: html html-email


【解决方案1】:

您最好将边框分配给单元格而不是表格。例如,这是您的 HTML 代码,在主表格之后的单元格上有 15 像素边框

<body style="margin:10px 10px 10px 10px; padding:0px 0px 0px 0px; font-family:Arial, Helvetica, sans-serif;">
<table width="645" cellpadding="0px" cellspacing="0px">
  <tr>
    <td style="border:15px solid #FF0000;"><br>
      <table width="615" border="0" background="img.png" style="background-repeat:no-repeat" >
        <tr>
          <td width="113" align="left"><img src="img.png" style="display:block;"></td>
          <td width="498" style="float:right; margin-right:15px;"><p align="right"><a href=""> <img src="icon_twit.png"> </a> <a href=""><img src="icon_face.png"></a> <a href=""><img src="icon_pin.png" ></a> <a href=""><img src="icon_insta.png" ></a> </p>
            <p>&nbsp;</p></td>
        </tr>
        <tr>
          <td height="135"></td>
        </tr>
      </table>
      <table width="100%">
        <tr>
          <td height="25px"></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td width="5%"></td>
          <td width="90%"><p>
              <label style="color:#FF0000; font-size:30px;font-family:Arial, Helvetica, sans-serif">Customer </label>
              <label style="color:#333333;font-size:30px;font-family:Arial, Helvetica, sans-serif">newsletter</label>
            </p></td>
          <td width="5%"></td>
        </tr>
        <tr>
          <td></td>
          <td><hr color="#FF0000"></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td><p style="color:#333333;font-size:16px;font-family:Arial, Helvetica, sans-serif"><b>You have a few options when building the drafts of your newsletter layout, however the </b></p></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td><hr color="#FF0000"></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td><img src="img1.png"></td>
          <td></td>
        </tr>
        <tr>
          <td height="25px"></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td height="25px"></td>
          <td><label style="color:#FF0000;font-size:18px;font-family:Arial, Helvetica, sans-serif"><b>Win&nbsp;</b></label>
            <label style="color:#FF0000;font-size:18px;font-family:Arial, Helvetica, sans-serif">VIP tickets to top festivals!</label></td>
          <td></td>
        </tr>
        <tr>
          <td height="25px"></td>
          <td><p style="color:#333333;font-size:12px;font-family:Arial, Helvetica, sans-serif;">You have a few options when building the drafts of your newsletter layout, however the best option to follow is to set fixed widths for your containing table. </td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>

【讨论】:

    【解决方案2】:

    试试这个

    <body style="margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif;">
    <table bgcolor="#FF0000" cellpadding="10px" cellspacing="0px">
    <tr>
    <td>
    <table width="645" bgcolor="#ffffff">
        <tr>
            <td>
                <br><table width="615" border="0" background="img.png" style="background-repeat:no-repeat" >
    <tr>
    <td width="113" align="left"><img src="img.png" style="display:block;">     
    </td>
    <td width="498" style="float:right; margin-right:15px;">
    <p align="right"><a href=""> <img src="icon_twit.png"> </a>
    <a href=""><img src="icon_face.png"></a>
    <a href=""><img src="icon_pin.png" ></a>
    <a href=""><img src="icon_insta.png" ></a>
    </p>
    <p>&nbsp;</p></td>
    </tr>
    <tr>
    <td height="135"></td>
    </tr>
    </table>
    <table width="100%">
    <tr><td height="25px"></td><td></td><td></td></tr>
    <tr>
    <td width="5%"></td>
    <td width="90%">
    <p>
    <label style="color:#FF0000; font-size:30px;font-family:Arial, Helvetica, sans-serif">Customer </label>
    <label style="color:#333333;font-size:30px;font-family:Arial, Helvetica, sans-serif">newsletter</label>
    </p></td>
    <td width="5%"></td>
    </tr>
    <tr><td></td><td><hr color="#FF0000"></td><td></td></tr>
    <tr>
    <td></td>
    <td>
    <p style="color:#333333;font-size:16px;font-family:Arial, Helvetica, sans-serif"><b>You have a few options when building the drafts of your newsletter layout, however the  
    </b></p></td>
    <td></td>
    </tr>
    <tr><td></td><td><hr color="#FF0000"></td><td></td></tr>
    <tr><td></td><td><img src="img1.png"> </td><td></td></tr>
    <tr><td height="25px"></td><td></td><td></td></tr>
    <tr><td height="25px"></td>
    <td>
    <label style="color:#FF0000;font-size:18px;font-family:Arial, Helvetica, sans-serif"><b>Win&nbsp;</b></label>
    <label style="color:#FF0000;font-size:18px;font-family:Arial, Helvetica, sans-serif">VIP tickets to top festivals!</label>
    </td><td></td></tr>
    <tr>
    <td height="25px"></td>
    <td>
    <p style="color:#333333;font-size:12px;font-family:Arial, Helvetica, sans-serif;">You have a few options when building the drafts of your newsletter layout, however the best option to follow is to set fixed widths for your containing table.
    </td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </table>
            </td>
        </tr>
    </table>
    </td>
    </tr>
     </table>
    </body>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-03-10
      • 1970-01-01
      • 2014-04-18
      • 1970-01-01
      • 2019-03-12
      • 2021-11-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多