邮件模板规范
邮件模板,请严格按照下面的规则执行。邮件客户端和Web页面的需求不一样,在编写代码的时候,考虑的方向也不同。
任何同窗,有什么问题,能够在下面提出。
!Doctype声明
为了向前兼容和避免某些浏览器的怪癖,使用html5的!doctype声明,格式以下:
原则,及思惟出发点
1. 不须要考虑DOM节点的精简和结构的优化。
以完成设计样式为最优先。必要时,没必要吝啬使用表格嵌套,没必要吝啬使用空的表格元素来占据空间。
2. 宁肯冗余,也不可缺乏必要定义。
3. 充分利用表格的私有属性来布局。width, height, bgcolor, background, align, valign等
4. 可替代性:
在编写html的时候,请思考当你页面的全部图片都被屏蔽时,是否用户还能了解页面的主要内容。
请务必在全部要设置背景图片的元素上,定义背景颜色。
5. 可利用Dreamweaver等工具来协助编写html,但切记,必定要时候作好每行代码的检查。
Mackup
1. 主体页面,包括细节处理,尽可能使用
2. 不容许在
元素上定义CSS样式,请将样式尽可能定义在元素上。(Gmail等邮件客户端会过滤上的属性)
3. 禁止使用
可是,
咱们仍然能够使用
但,必须使用表格和元素样式来完成全部基本样式和布局。
4. 禁止使用来加载外联CSS
5. 能够使用
,由于咱们不容易清除
在不一样浏览器的默认样式
6. 注意定义图片的替换文字(alt),及替换文字的颜色。
样式
1. 文字的处理。
font-* 族的CSS属性不容许使用缩写,请分别定义 font-size, font-weight, line-height, font-family(font-family有可能被过滤)
2. 继承性
注意表格不会继承外部的font等属性,请务必,在每一个
元素上都定义字体属性和颜色。
3. 背景的处理
不容许使用style="background:url(http://...)",请使用
的属性(attribute) background=“http://...”。(因为CSS背景图片是一种会影响页面渲染速度的定义,所以大多数Web邮件系统会过滤它。)
背景颜色,也请使用表格的bgcolor属性。
4. 对于复杂样式的处理,能够大胆地、大块地切图。
5. 避免尝试让两个table-cell的元素对齐,若是, 一个元素是用具体的宽度定义(width="100"),另外一个元素是用百分比来定位( width="50%")
6. 避免使用list-style来处理列表样式,请使用 “ • ” 字符来替代。
7. 避免使用元素拼接的方式,来实现背景大图的分割,尽可能使用表格的background
咱们知道,在元素下4px空白的问题。
禁用的,和不建议使用的CSS样式(见参考文献1)
这些样式,大都是可能引发元素偏移到容器外的样式
禁止使用 position, background, float
特别说明:
margin: margin的使用要很是谨慎,不容许使用margin做为重要的布局依据,不容许使用负margin,避免使用非零和非auto的margin属性。
图片版本控制(点评网业务需求)
若是邮件模板中的图片,使用 CDN 网络地址——如 http://i3.dpfile.com/.../abc.png——那么,更新这张图片的时候,请联系DBA(数据库工程师)刷新该图片的版本号。
而且,在新的邮件模板中,将该图片的版本号加1,好比:
将 http://i1.dpfile.com/.../edm/top.png 更新为 http://i1.dpfile.com/.../edm/top.v1.png
将 http://i1.dpfile.com/.../edm/bot.v12.png 更新为 http://i1.dpfile.com/.../edm/top.v13.png
常见问题
1. 如何让邮件在Gmail等Web页面中居中
有几种方式:
a> 在 body上定义style="width:apx; margin:auto"。注意,在Web邮件中,会自动为你生成一个
而不要尝试本身在邮件模板最外层添加一个带有margin:auto的
b> 使用
2. 如何在邮件的布局中占据空白
请使用空白的
元素,设置height属性来起到站位的做用。css