如何重构好我们的邮件页面

群发邮件一种常用的网站营销模式，作为前端人员，必须对“邮件页面”的重构进一步研究和了解。

回忆当初我第一次做邮件页面的时候，原本一个很简单版面设计，半小时左右就可以搞定，但是从开始到最后email出去达到完美效果，整整搞了3个小时。其实现在想想，当初太天真了，哈哈！！

为什么呢？原因就是当初把“邮件页面”和“普通页面”的重构混为一谈了。

目前各面向网民的主流邮箱都或多或少的会对它们接收到的HTML邮件在后台进行过滤。毫无疑问，JS代码是被严格过滤掉的，包括所有的事件监听属性，如onclick、onmouseover，这是基于邮件安全性的考虑。不仅如此，CSS代码也会被部分过滤。

那么在“邮件页面”的重构我们需要注意哪些事项呢，我自己总结了以下几点：

◆ 样式必须采用内联方式，不要采取外联方式。比如<div style="font-size:12px">内容....</div>；

◆ 大框架采用table布局；

◆ 尽量使用图片，少用背景，并且图片必须设置宽度和高度，以及alt属性，避免图片不显示；

◆ 如果使用背景图片的话，也可以的。但有些邮箱不支持css里定义background里的image，包括background:url(”…”)和background-image:url(“..”)，比如gmail。解决方法：在div的外面加上一层  <table>和<td>并在<td>里加上background属性，就可以正常显示了。例如：

1. <table>

2.   <tr>

3.    <td  background="https://jiangweishan.com/xxx.jpg">

4.      <div>test</div>

5.    </td>

6.   </tr>

7. </table>

目前就总结以上几点。希望能帮到大家，如果您有更多有关“邮件页面”重构的经验之谈，都可以留言，大家一起进步。