电子邮件代码规范

邮件里面的代码都是用table布局的。

电子邮件代码规范

1 > 代码的样式都要写在行内，不要写在<style></style>里面。因为有些邮件客户端是解析不了这些样式的。

2> 页面设计宽度建议650px。

3> 禁止使用定位和浮动样式。

4> 不要使用JS。

5> 页面水平居中采取align="center"方式。

6> 不使用拆分合并单元格。例如：<tdcolspan="2">&nbsp;</td>。

7> 不要使用背景图片。使用图片时需指定宽高。

 

Demo

 京东邮件部分代码，主体内容部分也是用这种table 嵌套table方式。

<table style="display:none;"width="1" height="1"><tbody><tr><td><img width="1" height="1"src="http://dc2.jd.com/auto.php?service=transfer&amp;type=pms&amp;from=dmp&amp;kid=155&amp;klid=88147&amp;gatewayurl=4711443385018313915"></td></tr></tbody></table>

 <table width="650" bgcolor="#ffffff"align="center" cellpadding="0" cellspacing="0"border="0">

  <tbody>

   <tr>

    <td width="30"></td>

    <td width="590">

     <table width="100%" cellpadding="0"cellspacing="0" border="0">

      <tbody>

       <tr>

        <td>

         <div style="border-bottom: 1px solid #f3f3f3;padding-bottom:7px;">

          <table width="100%" cellpadding="0"cellspacing="0" border="0">

           <tbody>

            <tr>

              <td align="left"valign="middle" class="img-wrapper"> <ahref="https://jd.com" target="_blank"> <imgsrc="http://img30.360buyimg.com/mkts/jfs/t2248/285/2558073148/3431/5db1bbac/570e1b69N6d769d37.png"border="0"> </a> </td>

              <td width="218"height="69" bgcolor="#FFFFFF" align="right"><a href="" target="_blank"> <img src=""border="0" style=" color:#005aa0; font-size:16px; font-weight:bold;"></a> </td>

            </tr>

           </tbody>

          </table>

         </div> </td>

       </tr>

       <tr>

        <td height="8"></td>

       </tr>

       <tr>

        <td>

         <table align="right" cellpadding="0"cellspacing="0" border="0">

          <tbody>

           <tr>

            <td> </td>

            <tdwidth="15"></td>

            <td align="right"> <ahref="http://dc2.jd.com/auto.php?service=transfer&amp;type=pms&amp;from=dmp&amp;kid=155&amp;klid=88147&amp;gatewayurl=4711443385018313915_default_3_1471144339245&amp;to=https%3A%2F%2Fhome.jd.com%2F"style="font-size: 13px; text-decoration: none;"target="_blank"><font color="#333">我的京东</font></a></td>

            <td width="15"></td>

            <td align="right" class="img-wrapper"> <imgsrc="http://img30.360buyimg.com/mkts/jfs/t2062/226/2562165748/471/60b56cb4/570e1b71N5d3e2e89.png"width="23" height="11" border="0"> </td>

            <td width="5"></td>

            <td align="right"> <ahref="http://dc2.jd.com/auto.php?service=transfer&amp;type=pms&amp;from=dmp&amp;kid=155&amp;klid=88147&amp;gatewayurl=4711443385018313915_default_4_1471144339245&amp;to=https%3A%2F%2Fvip.jd.com%2F"style="font-size: 13px; text-decoration: none;"target="_blank"> <font color="#333">京东会员</font></a> </td>

            <td width="15"></td>

            <td align="right" class="img-wrapper"> <imgsrc="http://img30.360buyimg.com/mkts/jfs/t2296/85/2552784635/659/95c6496/570e294dNd610fc70.png"width="19" height="15" border="0"> </td>

            <td width="5"></td>

            <td align="right"> <a href="http://dc2.jd.com/auto.php?service=transfer&amp;type=pms&amp;from=dmp&amp;kid=155&amp;klid=88147&amp;gatewayurl=4711443385018313915_default_5_1471144339245&amp;to=https%3A%2F%2Fi-mkt.jd.com%2Fsubscribe%2Findex%3Ftoken%3DKzECdLilvHQkie9BMszxAA2q%252BN4kbN9x0CAnBqXlyHjOHRL7%252Fkjq3gnZqUgV%252Fm0Jh6M9SoSACKZlfmquLY1nyg%253D%253D"style="font-size: 13px; text-decoration: none;"target="_blank"> <font color="#333">退订投诉</font></a> </td>

           </tr>

          </tbody>

         </table> </td>

       </tr>

       <tr>

        <td height="20"></td>

       </tr>

      </tbody>

     </table> </td>

    <td width="30"></td>

   </tr>

  </tbody>

 </table>

 

问题

1>  QQ浏览器在收件箱里面，邮件的主题后面会有一段文字的描述，这段描述文字是从邮件正文的文字里面按顺序拿取的。如果想在主题里面显示，而又不在正文里面显示，可以加<span style="display: none !important; mso-hide: all;font-size: 1px; color: white"> </span>这个标签在正文里面。