前端寫html郵件模板(兼容outlook)


使用前端完成郵件模板注意事項(實測兼容outlook2016)

  1.  使用html5之前的元素,outlook不支持html5;如果使用html5,outlook客戶端會提示在瀏覽器中打開;
  2. 使用table表格布局;
  3. 僅使用table、tr、td、div、span、img等基本元素
  4. 盡量使用行內樣式(class屬性是否可用未測試)
  5. 使用行內樣式時,每個元素盡量都寫出對應的樣式,可能繼承性不好(未測試,謹慎起見寫上而已)
  6. 使用table嵌套布局時,如果在table上設置margin/padding - top/bottom,outlook客戶端中會導致table下的每個單元格都含有margin/padding - top/bottom,應當在需要的td中寫margin/padding - top/bottom
  7. 示例:
  8. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>docmount</title>
    </head>
    
    <body>
      <table border="0" cellspacing="0" width="100%" cellpadding="0" style="background:#F8F8FB;font-size:14px; border-collapse: collapse">
        <tr>
          <td align='center' style="padding-top: 50px;">
            <table border="0" cellspacing="0" width="700" cellpadding="0" style="margin: 0 auto;background:white;box-shadow:0 0 3px 5px #888888;font-size:14px; border-collapse: collapse">
              <tr>
                <td>
                  <table border="0" cellspacing="0" width="540" cellpadding="0" style="margin:80px; margin-top:0; margin-bottom: 0; background:white;font-size:14px; border-collapse: collapse">
                    <tr>
                      <td>
                        <div style="font-size:14px;">內容</div>
                        <div style="margin-top: 20px; font-size:14px;">內容</div>
                        <div style="margin-top: 5px; padding-bottom: 100px; font-size:14px;">內容</div>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </body>
    
    </html>
    

     


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM