参考链接:http://www.jb51.net/web/12422.html
邮件编写HTML网页正常显示实现方法:
1、问题:将HTML网页嵌入邮件中以html形式发送出去,但是不同的邮箱解析不一样,有的邮箱能正常显示,有的邮箱不能正常显示,需要解决所有邮箱都能正常显示。
2、邮箱内嵌入html网页的规则:
第一类包括gmail、hotmail等邮箱,邮件内容是被布局在整个邮箱页面中的某个div中,整个html以div的形式加载在页面内。
第二类,包括163、126、sina等邮箱,邮件内容被布局在独立的iframe中,整个html以iframe的形式加载在页面内。
3、发送html邮件的建议:用style写内联的CSS;少用图片;用table实现左右布局或者更复杂的布局;用background元素设置背景图片等。
4、我们需要写兼容各邮箱的统一邮件模板,下面列出一些编写原则:
(1)全局规则之一,不要写<style>标签和外联CSS写法、不要写class,所有CSS都用style属性,float、position属性也不要用,用style写内联的CSS。
(2)、全局规则之二,少用图片,邮箱不会过滤你的img标签,但是系统往往会默认不载入陌生来信的图片。图片上务必加上alt。
(3)、不要在style里面写float、position这些style,因为会被过滤。那么如何实现左右布局或者更复杂的布局呢?用table布局。
(4)、用table布局。 style内容里面background可以设置color,但是img会被过滤,就是说不能通过CSS来设置背景图片了。但是有一个很有意思的元素属性,也叫background,里面可以定义一个图片路径。
5、用div内嵌style的方式实现网页HTML,可以被所有邮箱解析,测试显示正常;如果有个别邮箱显示不正常或网页复杂,将div实现改为table实现。
实例:div内嵌style方式实现
<link href="https://fonts.googleapis.com/css?family=Lato|Helvetica Neue" rel="stylesheet">
<div style = "width: 610px;height: 509px;background-color: #f9f9f9;">
<div style = "width: 100%;height: 83px;text-align: center;">
<img style=" margin-top: 23px" src="http://xxx/image/xxx.png">
</div>
<div style="width: 100%;height: 426px;background-color: #ffffff;padding-left: 35px;padding-right: 35px;">
<div style="color: #22a2a1;font-family: Lato;font-weight: 600;font-size: 20px;letter-spacing: 1px;padding-top: 39px;">
hello test:
</div>
<div style="font-size: 17px;color: rgba(19, 36, 63, 0.8);font-family: Lato;font-weight: 400;
line-height: 23px;margin-top: 16px;max-width: 538px;">
step 1
</div>
<div style="font-size: 17px;color: #13243f;font-family: Lato;font-weight: 400;
line-height: 23px;margin-top: 9px;max-width: 538px;">
step 2
</div>
<div style="font-size: 48px;color: #13243f;font-family: Helvetica Neue;
font-style: normal;font-weight: 300;margin: 32px auto 32px;text-align: center;">
{num}
</div>
<div style="font-size: 17px;color: #13243f;font-family: Lato;font-weight: 400;
max-width: 538px;line-height: 23px;margin-bottom: 19px;">
This email contains private information
<span style="color: #219290;font-family: Lato;font-weight: 600;">help@xxx.com</span>
<span style="color: #101a30;font-family: Lato;font-weight: 400;"> . </span>
</div>
<div style="font-size: 17px;color: #13243f;font-family: Lato;font-weight: 400;margin-bottom: 2px;">
Cheers,
</div>
<div style="font-size: 17px;color: #13243f;font-family: Lato;font-weight: 400;">
The team at xue
</div>
</div>
</div>
6、邮件页面为何只能Table写及注意事项
7、切邮件界面须知 table布局万岁 京东邮件举例