• html实现邮件模版布局-flex布局&table布局-demo

    邮件模版布局

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

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

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

    效果图

    flex布局

    1. 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}">Subjecth1>
    164.                 <h3 th:if="${not #strings.isEmpty($2)}" th:text="${$2}">Describeh3>
    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}">123456span>
    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.     
    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}">Subjecth1>
    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.                     Describeh3>
    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}">123456span>
    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>
  • 相关阅读:
    Vue——vue3中的ref和reactive数据理解以及父子组件之间props传递的数据
    Springboot 实践（17）spring boot整合Nacos配置中心
    Substring 在BCL和CLR里面搞了啥
    zabbix监控部署keepalived高可用
    人事管理系统是什么？HR系统有什么用？
    ArrayList源码
    【Java】线程、线程安全、线程状态
    bindParam() 和 bindValue() 的区别
    docker常用命令（云容器）
    JavaScript在ES6及后续新增的常用新特性
  • 原文地址：https://blog.csdn.net/JackieDYH/article/details/132734952