EDM模板编写踩坑指南（非响应式，纯table有源码）

Posted 2020-11-07 lasia962

　　如果问你table布局，你肯定会嗤之以鼻？什么table布局？不是早已经淘汰了吗？但是如果让你写EDM邮件模板，table布局相对来说是最好的选择。

　　如果让你立刻写EDM，你在网上搜的话，得到的信息相对较少，但是又很懵的话，建议你看看这篇文章，让你30分钟之内入门并开始写, 需要源码再私我吧~

　　或许有人会问EDM是什么，Email Direct Marketing的缩写，即电子邮件营销。EDM模板就是你邮箱中的广告邮件，其实就是在邮件中写网页。但是EDM模板怎么书写。如果你在网上搜，或许你会搜到以下书写要点：（以下要点来自知乎）

CSS只可以使用内联样式表，如：style=“margin：0“

•  设计之初遵循：图上无文本，文本后无底纹的规则

• 使用table而非div
• 所有图片使用 img标签，如：<img style="display:block" src=""/>
• 可以适当使用占位符space.gif
• 多用<br/>换行而非<p>
• 整体最佳宽度为：550-600px
• 不使用javascript
• 正式发送给用户前，多次测试
• 负边距部分邮箱会被屏蔽，不能用

　　可是看到这些，对于新手小白来说仍旧不友好，什么是table布局？？到底哪些能用哪些不能用？即使你去问别人，别人告诉你也是多测试多测试。可是既要兼容PC也要兼容移动，移动端既要兼容安卓也要兼容ios，之后也得注意不同端口打开的适配，比如，适配微信打开和用手机自带浏览器打开或者主流邮箱打开比如：网易邮箱大师、腾讯邮箱等等。

　　之前有人告诉我你能兼容 outlook的话，兼容其他大部分不成问题了。如果我们想弄清楚怎么才能支持这么多不同端口打开的话，不是本文的主要讲述点。

　　因为只要你遵循table写法，完全可以避开前人走过的深坑，快速在相应时间内完成工作。

　　好了，下面开始讲什么是table布局呢？

　　有些小伙伴可能要说了美团的EDM是table+div，网易的一些邮件是图片加链接，等等，我说明一下，本文写的是非响应式的纯table布局。首先说一下table的组成：表格

• 　　<tr>：表示表格的行
•        <td>：表示表格的列
•       <tbody>：表示表格的主体内容
• 　　属性cellpadding：规定单元边沿与内容之间的空白
• 　　属性cellspacing：规定单元格之间的空白
•       align:表格相对周围元素的对齐方式。

基础知识参考链接：http://www.w3school.com.cn/tags/tag_table.asp

 　现在我们知道什么是table布局了，那么该如何不用div来实现css中的一些效果？css世界中张鑫旭对于table布局中有说,table比css2出现的还要早,这就是为什么一些css的布局在table中不适用。所以我们可以使用P标签来实现块元素div 的效果。来，让我们模拟整个EDM书写过程。

1. 　　table 布局写法：这是最外层的table

   <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
   </table>　

2.      利用td实现空白书写，而不是margin，代码为上边距和左边距的写法

    <tr>
       <td height="34" valign="top"></td>
    </tr>
   
   <tr>
       <td width="20px"> </td>
   </tr>　
   　

　　　　方法二：直接在td中加左边距,与第一种是一样的,第一种优点是整齐,当边距一致时可复用,把边距与内容分开.

<tr>
    <td width="" valign="top" style="padding-left:55px;font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:14px;color:#333333">
        <p>更多讲师</p>
        <p>持续更新中......</p>
     </td>
</tr>

　　　　参考国外的模板写法如下：

<table class="remove-left" style="font-size: 0;line-height: 0;border-collapse: collapse;" align="left" border="0" cellpadding="0" cellspacing="0" width="1">
  <tbody>
     <tr>
        <td style="font-size: 0;line-height: 0;border-collapse: collapse;" height="3" width="0">
           <p style="padding-left:15px;mso-table-lspace:0;mso-table-rspace:0;"></p>
        </td>
    </tr>
  </tbody>
 </table>

 

　　　　3.     　　邮箱被自动识别颜色变为浏览器给的默认颜色怎么办？

　　　　放在a便签里,并设置style

<tr>
    <td>
        <p style="margin-top: 0; margin-bottom:0;text-decoration:none;font-size:12px;color:#ffffff;font-family:‘Microsoft YaHei‘;opacity:0.8">
            联系邮箱：<a href="" style="text-decoration:none;color:#ffffff">[email protected]</a>
        </p>
    </td>
</tr>

 

 

　　　　4.           IOS中,电话被safari自动识别为电话变为默认的蓝色并且可以点击打电话,与设计稿色调不一致怎么办

　　　　如果你去百度的话,结果如下,让你加入私有属性

　　　　safari有私有属性可以避免,但是我们是edm 不能加入meta

<meta name="format-detection" content="telephone=no" />

 

　　　　敲黑板,下面!
　　　　看到了没先用span转一下,在 span后面加入一些字母,将字母颜色设置为底色,即背景色

<tr>
        <td>
            <p style="margin-top: 0;  margin-bottom: 0;font-size:12px;color:#ffffff!important;font-family:‘Microsoft YaHei‘;opacity:0.8">
              咨询电话：<span>0</span><span>0</span><span style="display:none">crfebetf</span><span>0</span><span>-</span><span>0</span><span>0</span><span style="display:none">crfebetf</span><span>0</span>-<span>0</span><span>0</span><span style="display:none">crfebetf</span><span>0</span><span>0</span><span style="color:#2e3133">abc</span>
             </p>
        </td>
   </tr>

 

　　　　5.　　　安卓中出现,5位数字以上被一些手机邮箱或者浏览器识别电话,并带有蓝色之类的,点击到拨打界面,如何解决　

　　　　用span转一下

<tr>
    <td align="center" valign="top">
         <p style="text-decoration:line-through;font-size: 12px; line-height: 14px; color: #666566; font-family:‘Microsoft YaHei‘,Arial, Helvetica, sans-serif; text-transform: uppercase; padding: 0; margin: 0;">
            ￥<span>0</span><span>0</span><span>0</span><span>0</span><span>0</span>
         </p>
     </td>
 </tr>

 

　　　　6.　　　　在chrome看没问题的,在outlook看有些元素被跟预期的不一样怎么办？

　　　　这个时候,打开审查元素,如果元素被加上了外边距 则在这个元素的样式中加上

 <td>
      <p style="margin-top:0;margin-bottom:0;height:12px;display:block;color:#e63453;font-size:12px;width:25px;border-top:2px solid #e63453 !important;margin-left: 31px; padding-left: 48px;">&nbsp;</p>
  </td>

 

　　　　以上代码告诉你如何用p标签划线,其实就是把p标签当div一样用.然后去掉外边距。

　　　　7.     　　以上部分是我遇到在网上也搜不到解决方式的问题。踩过太多坑，保守一点没坏处。因为你不一定知道到底是什么原因导致手机屏幕显示的差异，不同邮箱打开的差异。

　　　　8.           今天是520，可是跟我有什么关系呢？（手动微笑）