devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

html实现邮件模版布局-flex布局&table布局-demo_邮件二维表格html模板

作者：笔触狂放9 | 2024-06-07 17:13:09

赞

踩

邮件二维表格html模板

邮件模版布局

flex - 布局简单方便  兼容性差

table - 优点 就是兼容性好，其他没有优点

注：使用图片需要png最好，使用svg图google邮箱会出现不能使用的情况

效果图

flex布局

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>邮箱验证码</title>
  7.     <style>
  8.         * {
  9.             padding: 0;
  10.             margin: 0;
  11.         }
  12.  
  13.         body {
  14.             background-color: #f5f5f5;
  15.         }
  16.  
  17.         .wrap {
  18.             width: 610px;
  19.             margin: 0 auto;
  20.             background-color: #fff;
  21.             border-radius: 10px;
  22.         }
  23.  
  24.         .head-top > img {
  25.             width: 100%;
  26.             margin-bottom: 24px;
  27.         }
  28.  
  29.         .head {
  30.             display: flex;
  31.             justify-content: space-between;
  32.             padding: 0 30px;
  33.         }
  34.  
  35.         .head-left-title > h1 {
  36.             color: #000;
  37.             font-family: PingFang SC;
  38.             font-size: 18px;
  39.             font-weight: 600;
  40.             padding: 50px 0 20px;
  41.         }
  42.  
  43.         .head-left-title > h3 {
  44.             color: #000;
  45.             font-family: PingFang SC;
  46.             font-size: 14px;
  47.             font-weight: 500;
  48.         }
  49.  
  50.         .code {
  51.             padding: 0 30px 75px;
  52.         }
  53.  
  54.         .code > h2 {
  55.             color: #000;
  56.             font-family: PingFang SC;
  57.             font-size: 14px;
  58.             font-weight: 500;
  59.             margin-bottom: 10px;
  60.         }
  61.  
  62.         .code > .code-num {
  63.             width: 100%;
  64.             height: 64px;
  65.             background-color: #E0FAFE;
  66.             display: flex;
  67.             justify-content: center;
  68.             align-items: center;
  69.         }
  70.  
  71.         .code-num > span {
  72.             color: #000;
  73.             font-family: PingFang SC;
  74.             font-size: 32px;
  75.             font-weight: 600;
  76.             letter-spacing: 12.8px;
  77.         }
  78.  
  79.         .code > h4 {
  80.             color: #000;
  81.             font-family: PingFang SC;
  82.             font-size: 14px;
  83.             font-weight: 400;
  84.             margin-top: 10px;
  85.         }
  86.  
  87.         .footer-wrap {
  88.             display: flex;
  89.             flex-direction: column;
  90.             align-items: center;
  91.             padding-bottom: 40px;
  92.         }
  93.  
  94.         .footer-wrap > h2 {
  95.             color: #000;
  96.             font-family: PingFang SC;
  97.             font-size: 12px;
  98.             font-weight: 400;
  99.             padding-bottom: 5px;
  100.         }
  101.  
  102.         .footer-wrap > h3 {
  103.             color: #6C6C6C;
  104.             font-family: PingFang SC;
  105.             font-size: 12px;
  106.             font-weight: 400;
  107.             padding-top: 5px;
  108.         }
  109.  
  110.         .footer-wrap > h3::before {
  111.             display: inline-block;
  112.             vertical-align: middle;
  113.             content: '';
  114.             width: 3px;
  115.             height: 3px;
  116.             border-radius: 50%;
  117.             margin-right: 5px;
  118.             background-color: #6C6C6C;
  119.         }
  120.  
  121.         .footer-connect {
  122.             display: flex;
  123.             flex-direction: column;
  124.             align-items: center;
  125.         }
  126.  
  127.         .footer-connect > h2 {
  128.             color: #000;
  129.             font-family: PingFang SC;
  130.             font-size: 12px;
  131.             font-weight: 400;
  132.             padding-bottom: 10px;
  133.         }
  134.  
  135.         .footer-connect > h3 {
  136.             color: #6C6C6C;
  137.             font-family: PingFang SC;
  138.             font-size: 12px;
  139.             font-weight: 400;
  140.             padding-bottom: 32px;
  141.         }
  142.  
  143.         .footer-img {
  144.             padding-bottom: 47px;
  145.         }
  146.  
  147.         .footer-img > img {
  148.             width: 30px;
  149.             height: 30px;
  150.             margin: 0 22px;
  151.         }
  152.     </style>
  153. </head>
  154. <body>
  155. <div class="wrap">
  156.     <div class="head-top">
  157.         <img src="https://d2t9byo8r5tyol.cloudfront.net/images/head-top.svg">
  158.     </div>
  159.     <div class="head">
  160.         <div class="head-left">
  161.             <img src="images/logo.svg">
  162.             <div class="head-left-title">
  163.                 <h1 th:text="${$1}">Subject</h1>
  164.                 <h3 th:if="${not #strings.isEmpty($2)}" th:text="${$2}">Describe</h3>
  165.             </div>
  166.         </div>
  167.         <div class="head-right">
  168.             <img src="https://d2t9byo8r5tyol.cloudfront.net/images/sketch.svg">
  169.         </div>
  170.     </div>
  171.     <div class="code">
  172.         <h2>验证码:</h2>
  173.         <div class="code-num">
  174.             <span th:text="${$3}">123456</span>
  175.         </div>
  176.         <h4 th:text="'验证码 ' + ${$4} + ' 分钟内有效,请勿泄露本邮件'">验证码 {} 分钟内有效,请勿泄露本邮件</h4>
  177.         <h4 th:if="${not #strings.isEmpty($5)}" th:text="'防钓鱼码: ' + ${$5}">防钓鱼码: {}</h4>
  178.     </div>
  179.     <div class="footer">
  180.         <img src="https://d2t9byo8r5tyol.cloudfront.net/images/bg.svg">
  181.         <div class="footer-wrap">
  182.             <h2>致力于保护您的账户和交易安全</h2>
  183.                 <h3>如果您怀疑自己收到了诈骗信息，请立即联系客服</h3>
  184.                 <h3>如果您对邮件的真实性存有疑问，请勿犹豫，立即通过官方客服来核实信息</h3>
  185.                 <h3>请勿与任何人分享您的验证码，包括官方客服和工作人员</h3>
  186.         </div>
  187.         <div class="footer-connect">
  188.             <h2>感谢您使用！</h2>
  189.             <h3>如有疑问或需要帮助，请联系客服</h3>
  190.             <div class="footer-img">
  191.                 <img src="https://d2t9byo8r5tyol.cloudfront.net/images/t.svg">
  192.                 <img src="https://d2t9byo8r5tyol.cloudfront.net/images/x.svg">
  193.             </div>
  194.         </div>
  195.     </div>
  196. </div>
  197. </body>
  198.  
  199. </html>

table布局-表格布局（推荐-兼容性高）

  1. <html>
  2.  
  3. <head>
  4.     <title>邮件模版</title>
  5. </head>
  6.  
  7. <body>
  8.     <!-- border="1" -->
  9.     <table width="610" cellspacing="0" cellpadding="0"
  10.         style="border-spacing: 0; color: #333333;  margin-left: auto; margin-right: auto;border-radius: 10px;">
  11.         <tr>
  12.             <td colspan="2" width="610" height="10">
  13.                 <img src="https://d2t9byo8r5tyol.cloudfront.net/images/head-top.svg" width="610px">
  14.             </td>
  15.         </tr>
  16.         <tr>
  17.             <td style="padding: 30px 0 0 30px;">
  18.                 <img src="images/logo.svg" width="154px">
  19.             </td>
  20.             <td rowspan="3" style="text-align: right;padding-top: 30px;">
  21.                 <img src="https://d2t9byo8r5tyol.cloudfront.net/images/sketch.svg" width="188px">
  22.             </td>
  23.         </tr>
  24.         <tr>
  25.             <td>
  26.                 <h1 style="font-size: 18px;
  27.                 font-weight: 600;color: #000;padding: 50px 0 20px;padding-left: 30px;" th:text="${$1}">Subject</h1>
  28.             </td>
  29.         </tr>
  30.         <tr>
  31.             <td>
  32.                 <h3 style="font-size: 14px;font-weight: 500;color: #000;padding-left: 30px;"
  33.                     th:if="${not #strings.isEmpty($2)}" th:text="${$2}">
  34.                     Describe</h3>
  35.                 </h3>
  36.             </td>
  37.         </tr>
  38.         <tr>
  39.             <td>
  40.                 <h2 style="font-size: 14px;
  41.                 font-weight: 500;color: #000;padding-left: 30px;">验证码:</h2>
  42.             </td>
  43.         </tr>
  44.         <tr>
  45.             <td colspan="2" style="padding: 0 30px;">
  46.                 <div style="width: 100%;
  47.                 height: 64px;
  48.                 background-color: #E0FAFE;text-align: center;line-height: 64px;">
  49.                     <span style="font-size: 32px;
  50.                     font-weight: 600;
  51.                     letter-spacing: 12.8px;" th:text="${$3}">123456</span>
  52.                 </div>
  53.             </td>
  54.         </tr>
  55.         <tr>
  56.             <td>
  57.                 <h4 style="font-size: 14px;
  58.                 font-weight: 400;color: #000;margin-top: 10px;padding-left: 30px;"
  59.                     th:text="'验证码 ' + ${$4} + ' 分钟内有效,请勿泄露本邮件'">验证码 {}
  60.                     分钟内有效,请勿泄露本邮件</h4>
  61.             </td>
  62.         </tr>
  63.         <tr>
  64.             <td>
  65.                 <h4 style="font-size: 14px;
  66.                 font-weight: 400;color: #000;margin-top: 10px;padding-left: 30px;" th:if="${not #strings.isEmpty($5)}"
  67.                     th:text="'防钓鱼码: ' + ${$5}">防钓鱼码: {}</h4>
  68.             </td>
  69.         </tr>
  70.         <tr>
  71.             <td colspan="2" width="610" height="110">
  72.                 <img src="https://d2t9byo8r5tyol.cloudfront.net/images/bg.svg" width="610px">
  73.             </td>
  74.         </tr>
  75.         <tr>
  76.             <td colspan="2" style="text-align: center;">
  77.                 <div style="padding-bottom: 40px;">
  78.                     <h2 style="font-size: 12px;
  79.                     font-weight: 400;color: #000;">AnyView致力于保护您的账户和交易安全</h2>
  80.                     <h3 style="font-size: 12px;
  81.                         font-weight: 400;color: #6C6C6C;">• 如果您怀疑自己收到了诈骗信息，请立即联系客服</h3>
  82.                     <h3 style="font-size: 12px;
  83.                         font-weight: 400;color: #6C6C6C;">• 如果您对邮件的真实性存有疑问，请勿犹豫，立即通过官方客服来核实信息</h3>
  84.                     <h3 style="font-size: 12px;
  85.                         font-weight: 400;color: #6C6C6C;">• 请勿与任何人分享您的验证码，包括官方客服和工作人员</h3>
  86.                 </div>
  87.             </td>
  88.         </tr>
  89.         <tr>
  90.             <td colspan="2" style="text-align: center;">
  91.                 <div>
  92.                     <h2 style="font-size: 12px;
  93.                     font-weight: 400;color: #000;padding-bottom: 10px;">感谢您使用！</h2>
  94.                     <h3 style="font-size: 12px;
  95.                     font-weight: 400;color: #6C6C6C;padding-bottom: 32px;">如有疑问或需要帮助，请联系客服</h3>
  96.                     <div style="padding-bottom: 47px;">
  97.                         <img src="https://d2t9byo8r5tyol.cloudfront.net/images/t.svg" width="30px">
  98.                         <img style="margin-left: 22px;" src="https://d2t9byo8r5tyol.cloudfront.net/images/x.svg"
  99.                             width="30px">
  100.                     </div>
  101.                 </div>
  102.             </td>
  103.         </tr>
  104.     </table>
  105. </body>
  106.  
  107. </html>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/686311
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号