zoukankan      html  css  js  c++  java
  • 关于邮箱模板样式设计的一些思考

             如今邮件已成为人们生活不可缺失的一部分,我们也发现邮箱中会出现不同样式的邮件样式,给我们带来不同的感受。但是问题出来了:不同的邮箱显示同一个邮件的显示效果缺不尽相同?怎样才能设计一种通用的邮箱样式呢?

             问题:验证邮件样式无法正常显示(准确的说,不同的邮箱相同的样式显示效果有很大不同)--使用DIV+CSS设计模板样式

    经过多次调试发现:

    1. DIV定义的class和id的样式一般会被过滤掉
    2. DIV内联的样式会被去除
    3. Table内联样式的字体会被去除

    改进方案:

    1. 采用table结构
    2. 使用内联样式定义
    3. 内联样式不要定义字体样式
    4. 使用图片样式(这种的话要预防邮箱设置不显示图片信息)

    小例子:

    View Code
    <table background="http://picturepath" width="675px" height="570px" style="font-size:14px;margin:0 auto;">
         <tr><td style="padding:90px 64px 0px;font-size:16px">HI,</td></tr>
         <tr><td style="padding:10px 64px 10px;font-size:14px">感谢你注册***。</td></tr>
         <tr><td style="padding:0px 64px;font-size:14px"> 请点击下面的链接激活您的帐号,完成注册<br><a href="'#'" style="cursor:pointer;text-decoration:none;color:#0082cb">$url</a><br>(如果点击链接没反应,请复制激活链接,粘贴到浏览器地址栏后访问)</td></tr>
         <tr><td style="padding:30px 64px 10px;color:#959393;font-size:14px">激活邮件48小时内有效,超过48小时请重新注册。<br>激活邮件将在您激活一次后失效。</td></tr>
         <tr><td style="padding:30px 0px 10px 400px;font-size:14px">***<br>2013年10月10号</td></tr>
         <tr><td style="padding:10px 60px 80px;border-top:1px solid #ededed;color:#959393;font-size:14px">如您错误的收到了此邮件,请不要点击激活按钮,该帐号将不会被启用。<br/>这是一封系统自动发出的邮件,请不要直接回复,如您有任何疑问,请联系 <a href="#" style="color:#0082cb;cursor:pointer;text-decoration:none;">kefu@***.com</a></td></tr>
     </table>

      

      

  • 相关阅读:
    双向链表
    单链表实例+反转
    const,static,volatile
    html基础知识
    linux知识
    2018-2019 ACM-ICPC Nordic Collegiate Programming Contest (NCPC 2018) D. Delivery Delays (二分+最短路+DP)
    2018-2019 ACM-ICPC Nordic Collegiate Programming Contest (NCPC 2018) A. Altruistic Amphibians (DP)
    BZOJ 1453 (线段树+并查集)
    HDU 5634 (线段树)
    BZOJ 2124 (线段树 + hash)
  • 原文地址:https://www.cnblogs.com/xiaoheimiaoer/p/2961968.html
Copyright © 2011-2022 走看看