<sub id="17nj5"><progress id="17nj5"></progress></sub><th id="17nj5"><progress id="17nj5"><nobr id="17nj5"></nobr></progress></th>

    <sub id="17nj5"></sub>
    <sub id="17nj5"></sub>

    <progress id="17nj5"><rp id="17nj5"><big id="17nj5"></big></rp></progress>

        <track id="17nj5"></track>

        EDM电子邮件CSS和HTML编码规范

        2016-11-25 09:54:03来源£º威易网作者£ºicech

        EDM是营销过程中比较重要的一种方式£¬而且在很多软件系统中£¬也经常会与用户进行电子邮件£¨Email£©的沟通过程¡£本文档定义了电子邮件£¨Email£©编码规范£¬便于前端开发工程师为邮件编写HTML模板的时候使用¡£

        EDM是营销过程中比较重要的一种方式£¬而且在很多软件系统中£¬也经常会与用户进行电子邮件£¨Email£©的沟通过程¡£本文档定义了电子邮件£¨Email£©编码规范£¬便于前端开发工程师为邮件编写HTML模板的时候使用¡£

        因为电子邮件的展现方式与一般Web页面不同£¬Web页面一般使用的是浏览器来进行渲染£¬而电子邮件多使用的是邮件客户端£¬如£ºOutlook¡¢Foxmail¡¢手机客户端APP等¡£所以£¬电子邮件要适配这些终端的渲染方式£¬因此标准就与我们之前编写的¡¶Web前端开发规范手册¡·有所不同¡£

        1 ¡¢使用<table>进行布局

        因为很多电子邮件客户端对CSS的支持都不是很好£¬而且对<p>和<div>标签支持比较差¡£如£º在Outlook 2007/2013下£¬就不支持<p>和<div>使用padding和width¡£所以任何排版布局£¬都必须采用<table>的方式¡£

        注意£ºtd尽量定义合适的宽度¡£

        2¡¢不能使用CSS浮动

        css样式不能使用?#24230;?#21644;外联方式£¬一定要使用内联方式¡£不论是float属性还是清除浮动的clear都不能使用¡£因为在Outlook 2007/2013下£¬不支持clear¡¢float¡¢left¡¢right¡¢top¡¢bottom等标签¡£所以像£ºfloat:left¡¢clear:both都不能使用¡£

        3¡¢不能使用css shorthand£¨属性简写£©

        我们常常会在CSS的编码中如此书写£º<p style=”font: bold 12px”>内容</p>£¬但是在为电子邮件编写模板的时候£¬不能使用属性简写¡£要拆分成£º<td style=”font-size: 12px; font-weight: bold;”>内容</td>这样的写法¡£

        4¡¢不能使用块?#23545;?#32032;

        在一些电子邮件客户端£¬对块?#23545;?#32032;的支持不好£¬如£ºp¡¢div¡¢h1~h6等都不建议使用£¬否则将可能对排版效果有着严重的影响¡£

        5¡¢对于图片<img>的说明

        图片是邮件模板排版的重要组成部分£¬很多邮件中的模板都会被邮件系统过滤£¬因此在排版之前就要考虑到如果图片无法显示£¬也可以让用户能够正常看到邮件排版和正常的布局¡£不能因为图片的?#31508;§£?#36896;成整体排版的变形¡£因此与几个重要的元素必须体现£º

        • 必须设置width和height
        • 增加必要的alt
        • 不能使用.png格式图片£¬而是使用gif和jpg格式图片
        • 设置border=”0”
        • 设置display: block
        • 在Outlook 2007/2013下不支持背景图片£¬即£ºbackground-image
        • 图片链接必须是绝对路径£¬不能是相对路径

        6¡¢不能使用JavaScript

        电子邮件客户端对flash¡¢JavaScript支持都不好£¬甚至动态的gif也是不安全的¡£所以不建议在邮件模板中使用这些内容¡£

        7¡¢其他

        还有一些无法归类的问题£¬这里也列出来£º

        • 不要使用XHTML£¬请使用HTML
        • Doctype不是必须的
        • 不能使用负边距£¬如£ºmargin-left: -20px
        • 换行多用<br>£¬尽量不用<p>
        • 最佳宽度为550~600px
        • 不要使用postion
        关键词£ºEDMCSS规范

        赞助商链接:

        2018ÌØÂëÉúФ±í
        <sub id="17nj5"><progress id="17nj5"></progress></sub><th id="17nj5"><progress id="17nj5"><nobr id="17nj5"></nobr></progress></th>

          <sub id="17nj5"></sub>
          <sub id="17nj5"></sub>

          <progress id="17nj5"><rp id="17nj5"><big id="17nj5"></big></rp></progress>

              <track id="17nj5"></track>
              <sub id="17nj5"><progress id="17nj5"></progress></sub><th id="17nj5"><progress id="17nj5"><nobr id="17nj5"></nobr></progress></th>

                <sub id="17nj5"></sub>
                <sub id="17nj5"></sub>

                <progress id="17nj5"><rp id="17nj5"><big id="17nj5"></big></rp></progress>

                    <track id="17nj5"></track>