邮件模板框架

2021年2月25日
| 没有评论
响应式格网邮件模板布局预览
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Grids Master Template</title>

  <style type="text/css">
    
    /* Outlines the grids, remove when sending */
    table td { border: 1px solid cyan; }

    /* CLIENT-SPECIFIC STYLES */
    body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
    img { -ms-interpolation-mode: bicubic; }

    /* RESET STYLES */
    img { border: 0; outline: none; text-decoration: none; }
    table { border-collapse: collapse !important; }
    body { margin: 0 !important; padding: 0 !important; width: 100% !important; }

    /* iOS BLUE LINKS */
    a[x-apple-data-detectors] {
      color: inherit !important;
      text-decoration: none !important;
      font-size: inherit !important;
      font-family: inherit !important;
      font-weight: inherit !important;
      line-height: inherit !important;
    }

    /* ANDROID CENTER FIX */
    div[style*="margin: 16px 0;"] { margin: 0 !important; }

    /* MEDIA QUERIES */
    @media all and (max-width:639px){ 
      .wrapper{ width:320px!important; padding: 0 !important; }
      .container{ width:300px!important;  padding: 0 !important; }
      .mobile{ width:300px!important; display:block!important; padding: 0 !important; }
      .img{ width:100% !important; height:auto !important; }
      *[class="mobileOff"] { width: 0px !important; display: none !important; }
      *[class*="mobileOn"] { display: block !important; max-height:none !important; }
    }

  </style>    
</head>
<body style="margin:0; padding:0; background-color:#F2F2F2;">
  
  <span style="display: block; width: 640px !important; max-width: 640px; height: 1px" class="mobileOff"></span>
  
  <center>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#F2F2F2">
      <tr>
        <td align="center" valign="top">
            
          <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
            <tr>
              <td height="10" style="font-size:10px; line-height:10px;"> </td>
            </tr>
            <tr>
              <td align="center" valign="top">

                <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
                  <tr>
                    <td align="center" valign="top">
                      Grid One
                    </td>
                  </tr>
                </table>

              </td>
            </tr>
            <tr>
              <td height="10" style="font-size:10px; line-height:10px;"> </td>
            </tr>
          </table>

          <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
            <tr>
              <td height="10" style="font-size:10px; line-height:10px;"> </td>
            </tr>
            <tr>
              <td align="center" valign="top">

                <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
                  <tr>
                    <td width="300" class="mobile" align="center" valign="top">
                      Grid Two
                    </td>
                    <td width="300" class="mobile" align="center" valign="top">
                      Grid Two
                    </td>
                  </tr>
                </table>

              </td>
            </tr>
            <tr>
              <td height="10" style="font-size:10px; line-height:10px;"> </td>
            </tr>
          </table>

          <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
            <tr>
             <td height="10" style="font-size:10px; line-height:10px;"> </td>
            </tr>
            <tr>
              <td align="center" valign="top">

                <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
                  <tr>
                      <td width="200" class="mobile" align="center" valign="top">
                        Grid Three
                      </td>
                      <td width="200" class="mobile" align="center" valign="top">
                        Grid Three
                      </td>
                      <td width="200" class="mobile" align="center" valign="top">
                        Grid Three
                      </td>
                  </tr>
                </table>

              </td>
            </tr>
            <tr>
              <td height="10" style="font-size:10px; line-height:10px;"> </td>
            </tr>
          </table>

          <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
            <tr>
              <td height="10" style="font-size:10px; line-height:10px;"> </td>
            </tr>
            <tr>
              <td align="center" valign="top">

                <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
                  <tr>
                    <td width="150" class="mobile" align="center" valign="top">
                      Grid Four
                    </td>
                    <td width="150" class="mobile" align="center" valign="top">
                      Grid Four
                    </td>
                    <td width="150" class="mobile" align="center" valign="top">
                      Grid Four
                    </td>
                    <td width="150" class="mobile" align="center" valign="top">
                      Grid Four
                    </td>
                  </tr>
                </table>

              </td>
            </tr>
            <tr>
              <td height="10" style="font-size:10px; line-height:10px;"> </td>
            </tr>
          </table>

          <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
            <tr>
              <td height="10" style="font-size:10px; line-height:10px;"> </td>
            </tr>
            <tr>
              <td align="center" valign="top">

                <table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
                  <tr>
                    <td width="120" class="mobile" align="center" valign="top">
                      Grid Five
                    </td>
                    <td width="120" class="mobile" align="center" valign="top">
                      Grid Five
                    </td>
                    <td width="120" class="mobile" align="center" valign="top">
                      Grid Five
                    </td>
                    <td width="120" class="mobile" align="center" valign="top">
                      Grid Five
                    </td>
                    <td width="120" class="mobile" align="center" valign="top">
                      Grid Five
                    </td>
                  </tr>
                </table>

              </td>
            </tr>
            <tr>
              <td height="10" style="font-size:10px; line-height:10px;"> </td>
            </tr>
          </table>
            
        </td>
      </tr>
    </table>
  </center>
</body>
</html>
流式格网模板布局预览
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Fluid Grid Master</title>

  <style type="text/css">

    /* Outlines the grid, remove when sending */
    table td { border:1px solid cyan; }

    /* CLIENT-SPECIFIC STYLES */
    body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
    img { -ms-interpolation-mode: bicubic; }

    /* RESET STYLES */
    img { border: 0; outline: none; text-decoration: none; }
    table { border-collapse: collapse !important; }
    body { margin: 0 !important; padding: 0 !important; width: 100% !important; }

    /* iOS BLUE LINKS */
    a[x-apple-data-detectors] {
      color: inherit !important;
      text-decoration: none !important;
      font-size: inherit !important;
      font-family: inherit !important;
      font-weight: inherit !important;
      line-height: inherit !important;
    }

    /* ANDROID CENTER FIX */
    div[style*="margin: 16px 0;"] { margin: 0 !important; }

  </style>    
</head>
<body style="margin:0; padding:0; background-color:#F2F2F2;">
  <center>

    <div style="background-color:#F2F2F2; max-width: 640px; margin: auto;">
    <!--[if mso]>
    <table role="presentation" width="640" cellspacing="0" cellpadding="0" border="0" align="center">
    <tr>
    <td>
    <![endif]-->

      <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
        <tr>
          <td align="center" valign="top" style="padding:10px;">
            
            <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
              <tr>
                <td align="center" valign="top" style="padding:10px;">
                  Grid 1
                </td>
              </tr>
            </table>

          </td>
        </tr>
      </table>

      <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
        <tr>
          <td align="center" valign="top" style="padding:10px;">
            
            <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
              <tr>
                <td width="300" align="center" valign="top" style="padding:10px;">
                  Grid 2
                </td>
                <td width="300" align="center" valign="top" style="padding:10px;">
                  Grid 2
                </td>
              </tr>
            </table>

          </td>
        </tr>
      </table>

      <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
        <tr>
          <td align="center" valign="top" style="padding:10px;">
            
            <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
              <tr>
                <td width="200" align="center" valign="top" style="padding:10px;">
                  Grid 3
                </td>
                <td width="200" align="center" valign="top" style="padding:10px;">
                  Grid 3
                </td>
                <td width="200" align="center" valign="top" style="padding:10px;">
                  Grid 3
                </td>
              </tr>
            </table>

          </td>
        </tr>
      </table>

      <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
        <tr>
          <td align="center" valign="top" style="padding:10px;">
            
            <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
              <tr>
                <td width="150" align="center" valign="top" style="padding:10px;">
                  Grid 4
                </td>
                <td width="150" align="center" valign="top" style="padding:10px;">
                  Grid 4
                </td>
                <td width="150" align="center" valign="top" style="padding:10px;">
                  Grid 4
                </td>
                <td width="150" align="center" valign="top" style="padding:10px;">
                  Grid 4
                </td>
              </tr>
            </table>

          </td>
        </tr>
      </table>

      <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
        <tr>
          <td align="center" valign="top" style="padding:10px;">
            
            <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
              <tr>
                <td width="120" align="center" valign="top" style="padding:10px;">
                  Grid 5
                </td>
                <td width="120" align="center" valign="top" style="padding:10px;">
                  Grid 5
                </td>
                <td width="120" align="center" valign="top" style="padding:10px;">
                  Grid 5
                </td>
                <td width="120" align="center" valign="top" style="padding:10px;">
                  Grid 5
                </td>
                <td width="120" align="center" valign="top" style="padding:10px;">
                  Grid 5
                </td>
              </tr>
            </table>

          </td>
        </tr>
      </table>

    <!--[if mso]>
    </td>
    </tr>
    </table>
    <![endif]-->
    </div>

  </center>
</body>
</html>
混合格网预览
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Hybrid Grid Master</title>
<style type="text/css">

  table td { border: 1px solid cyan;}  
  @media only screen and (max-width: 600px) {
    .wrapper{width:95% !important;}
  }   

</style>
</head>
<body style="margin:0; padding:0; background-color:#F8F8F8">
<center>

<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#F8F8F8" class="wrapper">
    
  <tr>
    <td align="center" height="100%" valign="top" width="100%">
      <!--[if (gte mso 9)|(IE)]>
      <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
      <tr>
      <td align="center" valign="top" width="600">
      <![endif]-->
        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" bgcolor="#ffffff">
          <tr>
            <td align="center" valign="top" style="font-size:14px;">

              Grid One

            </td>
          </tr>
        </table>
      <!--[if (gte mso 9)|(IE)]>
      </td>
      </tr>
      </table>
      <![endif]-->
    </td>
  </tr>

  <tr>
    <td align="center" valign="top" width="100%">

      <!--[if (gte mso 9)|(IE)]>
      <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
      <tr>
      <td align="center" valign="top" width="600">
      <![endif]-->
      <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" bgcolor="#FFFFFF">
        <tr>
          <td align="center" valign="top" style="font-size:0;">
            <!--[if (gte mso 9)|(IE)]>
            <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
            <tr>
            <td align="left" valign="top" width="295">
            <![endif]-->
            <div style="display:inline-block; max-width:295px; vertical-align:top; width:100%;">
              <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:295px;" class="deviceWidth">
                <tr>
                  <td align="center" valign="top" style="font-size:14px;">

                    Grid Two

                  </td>
                </tr>
              </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            <td align="left" valign="top" width="295">
            <![endif]-->
            <div style="display:inline-block; max-width:295px; vertical-align:top; width:100%;">
              <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:295px;" class="deviceWidth">
                <tr>
                  <td align="center" valign="top" style="font-size:14px;">

                    Grid Two  

                  </td>
                </tr>
              </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            </tr>
            </table>
            <![endif]-->
          </td>
        </tr>
      </table>
      <!--[if (gte mso 9)|(IE)]>
      </td>
      </tr>
      </table>
      <![endif]-->

    </td>
  </tr>

  <tr>
    <td align="center" valign="top" width="100%">
      <!--[if (gte mso 9)|(IE)]>
      <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
      <tr>
      <td align="center" valign="top" width="600">
      <![endif]-->
      <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" bgcolor="#FFFFFF">
        <tr>
          <td align="center" valign="top" style="font-size:0;">
            <!--[if (gte mso 9)|(IE)]>
            <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
            <tr>
            <td align="left" valign="top" width="195">
            <![endif]-->
            <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
              <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
                <tr>
                  <td align="center" valign="top" style="font-size:14px;">

                    Grid Three

                  </td>
                </tr>
              </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            <td align="left" valign="top" width="195">
            <![endif]-->
            <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
              <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
                <tr>
                  <td align="center" valign="top" style="font-size:14px;">

                    Grid Three

                  </td>
                </tr>
              </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            <td align="left" valign="top" width="195">
            <![endif]-->
            <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
              <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
                <tr>
                  <td align="center" valign="top" style="font-size:14px;">

                    Grid Three

                  </td>
                </tr>
              </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            </tr>
            </table>
            <![endif]-->
          </td>
        </tr>
      </table>
      <!--[if (gte mso 9)|(IE)]>
      </td>
      </tr>
      </table>
      <![endif]-->
    </td>
  </tr>

</table>
</center>
</body>
</html>

范本：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title></title>

  <style type="text/css">
  </style>    
</head>
<body style="margin:0; padding:0; background-color:#F2F2F2;">
  <center>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#F2F2F2">
        <tr>
            <td align="center" valign="top">
                
                
            </td>
        </tr>
    </table>
  </center>
</body>
</html>

此邮件模板支持如下邮件客户端：

  Client   Supported
  Apple Mail 7 , 8 (Desktop)   ✔
  Apple Mail & iOS Devices   ✔
  Outlook (2000, 2002, 2003, 2007, 2011, 2010, 2013, 2016)   ✔
  Thunderbird 31   ✔
  Android – 2.3 & 4.2   ✔
  Gmail (Desktop)   ✔
  Gmail (Mobile, iOS, Android, Apps)   ✔  
  Outlook 2011 for Mac   ✔
  AOL Mail (Explorer, Firefox & Chrome)   ✔
  Hotmail   ✔
  Outlook.com (Explorer, Firefox & Chrome)   ✔
  Yahoo! (Explorer, Firefox & Chrome)   ✔
   Windows Phone 8   ✔
   Office 365   ✔
打赏微海报分享
笔记