使用HTML编写简单的邮件模版

2019-01-15 09:55:12于海丽

  表格的 border 属性等于1, 是为了方便开发。正式发布的时候,再把这个属性设为0。

  在内层,放置第二个表格。用来展示内容。第二个table的宽度定为600像素,防止超过客户端的显示宽度。

  • <table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">     
  •  <tr>     <td> Row 1 </td>  
  •  </tr>     
  •  <tr>     <td> Row 2 </td>  
  •  </tr>     
  •  <tr>     <td> Row 3 </td>  
  •  </tr>     
  • </table>  
  •   邮件内容有几个部分,就设置几行(row)。

      3. 图片

      图片是唯一可以引用的外部资源。其他的外部资源,比如样式表文件、字体文件、视频文件等,一概不能引用。

      有些客户端会给图片链接加上边框,要去除边框。

    CSS Code复制内容到剪贴板
  •   img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}      
  •   a img {border:none;}      
  •   <img border="0" style="display:block;">  

      需要注意的是,不少客户端默认不显示图片(比如Gmail),所以要确保即使没有图片,主要内容也能被阅读。

      4. 行内样式

      所有的CSS规则,最好都采用行内样式。因为放置在网页头部的样式,很可能会被客户端删除。客户端对CSS规则的支持情况,请看这里。

      另外,不要采用CSS的简写形式,有些客户端不支持。比如,不要写成下面这样:

          

  • style="font: 8px/14px Arial, sans-serif;"  
  •   如果想表达

         

  •  <p style="margin: 1em 0;">  
  •   要写成下面这样:

          

  • <p style="margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0;">