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

最新推荐文章于 2024-05-04 13:00:00 发布

haiqiancun

最新推荐文章于 2024-05-04 13:00:00 发布

阅读量8.8k

点赞数

分类专栏： html+css 文章标签： html 邮件邮箱京东商城 css

本文链接：https://blog.csdn.net/zyx13859002783/article/details/38434719

版权

在切邮件界面时，避免过多图片并保持样式内联至关重要。推荐使用table进行布局以实现居中，确保图片border=0，并注意某些邮箱不支持background属性。避免使用float和margin，可利用 替代。分享一段京东商城邮件界面的示例代码，展示万无一失的布局方法。

摘要由CSDN通过智能技术生成

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

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

1. 不要用div 用table去布局，table居中万能的记住这点

2. 所有图片要设置border=0

3.background属性在有些邮箱不支持显示，如outlook HOTMAIL

4.<p>的行间距在不同的邮箱显示会不一样会增大，可用<span>代替

5.不要使用float属性，不然你会死的很难看，到时候页面要重新排版

6.margin属性也最好不用，可以用 代替, 如outlook HOTMAIL就会把它砍掉，我有前车之鉴

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

图片来源：qq截屏

<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"> </td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="650" border="0" align="center" bgcolor="#f3f3f2">
<tr>
<td width="10" bgcolor