web开发-邮件编写HTML网页正常显示实现方法-学习笔记八

参考链接：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写及注意事项

http://www.cnblogs.com/ranyonsue/p/5413671.html

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

http://blog.csdn.net/zyx13859002783/article/details/38434719#