张叶星

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

  • 张叶星
  • 2014-06-20 15:02:07
  •  0

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

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

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

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

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

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

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

6.margin属性也最好不用,可以用&nbsp;代替, 如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">&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 版权所有 转载需注明 否则后果自负
分类文章
 网页布局生成器 - 网页布局就这么简单  0  css实现正方形布局  0  css hack  0  PIE.js使IE6,7,8支持部分常用CSS3渲染  0  CSS文字被鼠标选中后的文字颜色及背景  0  html5 canvas 实现绚丽的时钟效果  2  css 让html5移动端div滚动更顺畅overflow  0  个人感觉PC端页面很舒服的阅读内容的文字排版和字体颜色设置  0  css中class名类似属性书写格式  0  css实现文字背景半透明  0  hack ie10  0  css3样式代码生成器小工具[css3tools]  0  html5 开发常见属性备注  0  切邮件界面须知 table布局万岁 京东邮件举例  0  css 实现小箭头效果+仿京东tab效果  1  textarea 在浏览器中固定大小,禁止拖动  0  去掉a标签的虚线框  0  IE CSS Bug background:none 或 背景图像透明部分不可点击  0  移动端webapp自适应布局  1  CSS控制连续英文字母强制换行 word-break:break-all  0  ie6滤镜的使用(解决bug背景变黑)和背景图片自适应  1  自适应网页设计(Responsive Web Design)响应式布局  1  layout CSS Reset  0  jquery mobile-16 select menu  0  jquery元素相对定位插件  0  “经验积累所得”兼容各种浏览器 CSS、jquery实现半透明div层的方法  2  各种漂亮的loading图标  0  CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)  0  遮罩层 背景透明的css代码  0  漂亮的字体 Comic Sans MS  0