前几天的时候,小师傅给安排了一个任务就是做一个邮件里展示的证书末班,就给了一个psd的图,看完之后按照之前的理解做了一个简单的样式出来,当然就是所有css的东西都是写在了顶部,后来看了之后才知道,在HTML Email这里面也有一个比较大的学问,个人的理解就是说白了在邮件里要考虑到安全性,所以很多的功能都不支持,貌似js之类的都会被一些邮件的客户端所过滤掉。
在看了几篇博文之后大致结合了自己实践过程中的问题总结了一下有如下几点感觉需要注意的:
1.邮件的模板需要写成一个以div为根节点的html[邮件模板不知道是在什么浏览器下面展示的也不知道是在什么第三方的邮件客户端下展示的,他有可能是一个iframe把你的邮件内容包含进去的,也有可能是简单的用一个div包含]
2.所有的样式需要写成内联[不知道加载你邮件模板的客户端写了什么默认的样式,由于css的一些继承属性会给最后的显示带来一些不便]
3.对于那些图片什么的必须指定它的高度宽度以及alt[因为貌似好多邮件客户端一开始的加载都不会加载,需要用户自己手动点击同意,没有这些的话,样式会乱而且不知道是什么内容];
4.line-height!!!会影响到你的一些布局的间距,之前做的时候就被坑了一会,最好自己设置一个数值来覆盖;
5.还有就是布局上,一些类似什么绝对定位什么的都不能用,因为在很多地方不支持,我看几个博文上说,用table来布局,不过这样的话会对整体的可维护性有点不好,在后续需要调整的话,修改不是很方便++!我在实际中,用的是div,一些间距的话用了margin
1.http://www.maildesign.cn/archives/1380
在看了几篇博文之后大致结合了自己实践过程中的问题总结了一下有如下几点感觉需要注意的:
1.邮件的模板需要写成一个以div为根节点的html[邮件模板不知道是在什么浏览器下面展示的也不知道是在什么第三方的邮件客户端下展示的,他有可能是一个iframe把你的邮件内容包含进去的,也有可能是简单的用一个div包含]
2.所有的样式需要写成内联[不知道加载你邮件模板的客户端写了什么默认的样式,由于css的一些继承属性会给最后的显示带来一些不便]
3.对于那些图片什么的必须指定它的高度宽度以及alt[因为貌似好多邮件客户端一开始的加载都不会加载,需要用户自己手动点击同意,没有这些的话,样式会乱而且不知道是什么内容];
4.line-height!!!会影响到你的一些布局的间距,之前做的时候就被坑了一会,最好自己设置一个数值来覆盖;
5.还有就是布局上,一些类似什么绝对定位什么的都不能用,因为在很多地方不支持,我看几个博文上说,用table来布局,不过这样的话会对整体的可维护性有点不好,在后续需要调整的话,修改不是很方便++!我在实际中,用的是div,一些间距的话用了margin
1.http://www.maildesign.cn/archives/1380
2.http://swordair.com/principles-on-good-compatibility-html-mail-edm/
3.http://www.campaignmonitor.com/css/