切邮件界面须知 table布局万岁 京东邮件举例

切邮件界面大家都很熟悉吧,有人说直接用ps切片然后直接一块一块的布局,从上往下,确实这样的布局很块,但是这样的一份邮件界面出来页面的图片就很多网速不好的时候就会出不回来图片,接下来我要跟大家分享的是我工作中积累的一些问题,记录在这边方便以后参考使用。

最最重要的一点是,不要把样式分离出来,这样生成邮件的时候STYLE里面的样式会全部被砍掉。

  1. 不要用div 用table去布局,table居中万能的记住这点
  2. 所有图片要设置border=0
  3. background属性在有些邮箱不支持显示,如outlook HOTMAIL
  4. 的行间距在不同的邮箱显示会不一样会增大,可用代替

  5. 不要使用float属性,不然你会死的很难看,到时候页面要重新排版
  6. margin属性也最好不用,可以用 代替, 如outlook HOTMAIL就会把它砍掉,我有前车之鉴

下面给大家来一段例子,这个例子就拿“京东商城”的吧

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<table cellpadding="0" cellspacing="0" width="650" border="0" align="center" bgcolor="#f3f3f2" height="30">
<tr>
<td style="color:#8c8b8b; font-size:12px;font-family:Arial, Helvetica, sans-serif;" align="right" height="30">为了您能够正常收到来自京东的优惠信息和会员邮件,请将<a href="mailto:customer_service@jd.com" target="_blank">customer_service@jd.com</a>添加进您的通讯录 </td>
<td width="10" bgcolor="#f3f3f2">&nbsp;</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="650" border="0" align="center" bgcolor="#f3f3f2">
<tr>
<td width="10" bgcolor="#f3f3f2">&nbsp;</td>
<td width="248" height="61" style="padding-left:25px;" bgcolor="#FFFFFF"><a href="http://csc.jd.com/edm.ashx?type1=edm&amp;type2=stats&amp;data=A_1178698294%7C%7C%7C419268793@qq.com%7C%7C%7C1385298662980%7C%7C%7C100&amp;redirect=http://click.union.jd.com/JdClick/?unionId=257$siteid=2$to=http://www.jd.com" target="_blank"><img src="http://img30.360buyimg.com/EdmPlatform/g10/M00/14/05/rBEQWFFnaLcIAAAAAAAe1vb0epAAAD8OgEbUiAAAB7u997.png" border="0" style=" color:#005aa0; font-size:16px; font-weight:bold;"></a></td>
<td bgcolor="#FFFFFF"></td>
<td width="218" height="61" bgcolor="#FFFFFF" align="right"><a href="http://e.weibo.com/u/2510049230" target="_blank"><img src="http://img30.360buyimg.com/EdmPlatform/g12/M00/04/09/rBEQYVGMaI0IAAAAAAALcL-op8cAAA1iwIlfxUAAAuI914.png" border="0" style=" color:#005aa0; font-size:16px; font-weight:bold;"></a></td>
<td width="20" height="61" bgcolor="#FFFFFF" style="border-right:1px solid #b3b3b2;">&nbsp;</td>
<td width="10" height="61" bgcolor="#f3f3f2" style="border-left:1px solid #dededd;">&nbsp;</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="650" border="0" align="center" bgcolor="#f3f3f2">
<tr>
<td width="28" height="33" bgcolor="#cc0b0b"><img src="http://img30.360buyimg.com/EdmPlatform/g7/M03/07/0B/rBEHZVBbxd4IAAAAAAAB9gsyV9AAABcCQP__boAAAJG042.jpg" width="28" height="33" border="0"></td>
<td bgcolor="#cc0b0b" style="color:#FFF; font-size:14px;" align="center"><a href="http://csc.jd.com/edm.ashx?type1=edm&amp;type2=stats&amp;data=A_1178698294%7C%7C%7C419268793@qq.com%7C%7C%7C1385298662980%7C%7C%7C100&amp;redirect=http://click.union.jd.com/JdClick/?unionId=257$siteid=2$to=http://www.jd.com" style=" color:#FFF; text-decoration:none;font-family:Microsoft YaHei;font-weight:bold;" target="_blank">首页</a><font> | </font><a href="http://csc.jd.com/edm.ashx?type1=edm&amp;type2=stats&amp;data=A_1178698294%7C%7C%7C419268793@qq.com%7C%7C%7C1385298662980%7C%7C%7C100&amp;redirect=http://click.union.jd.com/JdClick/?unionId=257$siteid=2$to=http://www.jd.com/book.html" target="_blank" style=" color:#FFF; text-decoration:none;font-family:Microsoft YaHei;font-weight:bold;">图书</a><font> | </font><a href="http://csc.jd.com/edm.ashx?type1=edm&amp;type2=stats&amp;data=A_1178698294%7C%7C%7C419268793@qq.com%7C%7C%7C1385298662980%7C%7C%7C100&amp;redirect=http://click.union.jd.com/JdClick/?unionId=257$siteid=2$to=http://www.jd.com/electronic.html" target="_blank" style=" color:#FFF; text-decoration:none;font-family:Microsoft YaHei;font-weight:bold;">家电</a><font> | </font><a href="http://csc.jd.com/edm.ashx?type1=edm&amp;type2=stats&amp;data=A_1178698294%7C%7C%7C419268793@qq.com%7C%7C%7C1385298662980%7C%7C%7C100&amp;redirect=http://click.union.jd.com/JdClick/?unionId=257$siteid=2$to=http://www.jd.com/digital.html" target="_blank" style=" color:#FFF; text-decoration:none;font-family:Microsoft YaHei;font-weight:bold;">手机数码</a><font> | </font><a href="http://csc.jd.com/edm.ashx?type1=edm&amp;type2=stats&amp;data=A_1178698294%7C%7C%7C419268793@qq.com%7C%7C%7C1385298662980%7C%7C%7C100&amp;redirect=http://click.union.jd.com/JdClick/?unionId=257$siteid=2$to=http://www.jd.com/computer.html" target="_blank" style=" color:#FFF; text-decoration:none;font-family:Microsoft YaHei;font-weight:bold;">电脑</a><font> | </font><a href="http://csc.jd.com/edm.ashx?type1=edm&amp;type2=stats&amp;data=A_1178698294%7C%7C%7C419268793@qq.com%7C%7C%7C1385298662980%7C%7C%7C100&amp;redirect=http://click.union.jd.com/JdClick/?unionId=257$siteid=2$to=http://www.jd.com/home.html" target="_blank" style=" color:#FFF; text-decoration:none;font-family:Microsoft YaHei;font-weight:bold;">家居</a><font> | </font><a href="http://csc.jd.com/edm.ashx?type1=edm&amp;type2=stats&amp;data=A_1178698294%7C%7C%7C419268793@qq.com%7C%7C%7C1385298662980%7C%7C%7C100&amp;redirect=http://click.union.jd.com/JdClick/?unionId=257$siteid=2$to=http://www.jd.com/clothing.html" target="_blank" style=" color:#FFF; text-decoration:none;font-family:Microsoft YaHei;font-weight:bold;">服饰</a><font> | </font><a href="http://csc.jd.com/edm.ashx?type1=edm&amp;type2=stats&amp;data=A_1178698294%7C%7C%7C419268793@qq.com%7C%7C%7C1385298662980%7C%7C%7C100&amp;redirect=http://click.union.jd.com/JdClick/?unionId=257$siteid=2$to=http://www.jd.com/beauty.html" target="_blank" style=" color:#FFF; text-decoration:none;font-family:Microsoft YaHei;font-weight:bold;">化妆</a><font> | </font><a href="http://csc.jd.com/edm.ashx?type1=edm&amp;type2=stats&amp;data=A_1178698294%7C%7C%7C419268793@qq.com%7C%7C%7C1385298662980%7C%7C%7C100&amp;redirect=http://click.union.jd.com/JdClick/?unionId=257$siteid=2$to=http://www.jd.com/watch.html" target="_blank" style=" color:#FFF; text-decoration:none;font-family:Microsoft YaHei;font-weight:bold;">钟表</a><font> | </font><a href="http://csc.jd.com/edm.ashx?type1=edm&amp;type2=stats&amp;data=A_1178698294%7C%7C%7C419268793@qq.com%7C%7C%7C1385298662980%7C%7C%7C100&amp;redirect=http://click.union.jd.com/JdClick/?unionId=257$siteid=2$to=http://www.jd.com/baby.html" target="_blank" style=" color:#FFF; text-decoration:none;font-family:Microsoft YaHei;font-weight:bold;">母婴</a></td>
<td width="28" height="33" bgcolor="#cc0b0b"><img src="http://img30.360buyimg.com/EdmPlatform/g7/M03/07/0B/rBEHZVBbxgMIAAAAAAAB_SFfd3UAABcDQP__VYAAAKq678.jpg" width="28" height="33" border="0"></td>
</tr>
</table>

可以把这段代码复制到html文件里面打开看看效果,这样的布局绝对让你万无一失。

文章转载自:haiqiancun.com