Question

我正在使用电子邮件模板设计。我的问题是“模板可以正常使用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>

Answer 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>

Answer 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>

电子邮件模板设计问题

2 个答案: