邮件模版布局
flex - 布局简单方便 兼容性差
table - 优点 就是兼容性好，其他没有优点
注：使用图片需要png最好，使用svg图google邮箱会出现不能使用的情况
效果图
flex布局
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>邮箱验证码</title> <style> * { padding: 0; margin: 0; } body { background-color: #f5f5f5; } .wrap { width: 610px; margin: 0 auto; background-color: #fff; border-radius: 10px; } .head-top > img { width: 100%; margin-bottom: 24px; } .head { display: flex; justify-content: space-between; padding: 0 30px; } .head-left-title > h1 { color: #000; font-family: PingFang SC; font-size: 18px; font-weight: 600; padding: 50px 0 20px; } .head-left-title > h3 { color: #000; font-family: PingFang SC; font-size: 14px; font-weight: 500; } .code { padding: 0 30px 75px; } .code > h2 { color: #000; font-family: PingFang SC; font-size: 14px; font-weight: 500; margin-bottom: 10px; } .code > .code-num { width: 100%; height: 64px; background-color: #E0FAFE; display: flex; justify-content: center; align-items: center; } .code-num > span { color: #000; font-family: PingFang SC; font-size: 32px; font-weight: 600; letter-spacing: 12.8px; } .code > h4 { color: #000; font-family: PingFang SC; font-size: 14px; font-weight: 400; margin-top: 10px; } .footer-wrap { display: flex; flex-direction: column; align-items: center; padding-bottom: 40px; } .footer-wrap > h2 { color: #000; font-family: PingFang SC; font-size: 12px; font-weight: 400; padding-bottom: 5px; } .footer-wrap > h3 { color: #6C6C6C; font-family: PingFang SC; font-size: 12px; font-weight: 400; padding-top: 5px; } .footer-wrap > h3::before { display: inline-block; vertical-align: middle; content: ''; width: 3px; height: 3px; border-radius: 50%; margin-right: 5px; background-color: #6C6C6C; } .footer-connect { display: flex; flex-direction: column; align-items: center; } .footer-connect > h2 { color: #000; font-family: PingFang SC; font-size: 12px; font-weight: 400; padding-bottom: 10px; } .footer-connect > h3 { color: #6C6C6C; font-family: PingFang SC; font-size: 12px; font-weight: 400; padding-bottom: 32px; } .footer-img { padding-bottom: 47px; } .footer-img > img { width: 30px; height: 30px; margin: 0 22px; } </style> </head> <body> <div class="wrap"> <div class="head-top"> <img src="https://d2t9byo8r5tyol.cloudfront.net/images/head-top.svg"> </div> <div class="head"> <div class="head-left"> <img src="images/logo.svg"> <div class="head-left-title"> <h1 th:text="${$1}">Subject</h1> <h3 th:if="${not #strings.isEmpty($2)}" th:text="${$2}">Describe</h3> </div> </div> <div class="head-right"> <img src="https://d2t9byo8r5tyol.cloudfront.net/images/sketch.svg"> </div> </div> <div class="code"> <h2>验证码:</h2> <div class="code-num"> <span th:text="${$3}">123456</span> </div> <h4 th:text="'验证码 ' + ${$4} + ' 分钟内有效,请勿泄露本邮件'">验证码 {} 分钟内有效,请勿泄露本邮件</h4> <h4 th:if="${not #strings.isEmpty($5)}" th:text="'防钓鱼码: ' + ${$5}">防钓鱼码: {}</h4> </div> <div class="footer"> <img src="https://d2t9byo8r5tyol.cloudfront.net/images/bg.svg"> <div class="footer-wrap"> <h2>致力于保护您的账户和交易安全</h2> <h3>如果您怀疑自己收到了诈骗信息，请立即联系客服</h3> <h3>如果您对邮件的真实性存有疑问，请勿犹豫，立即通过官方客服来核实信息</h3> <h3>请勿与任何人分享您的验证码，包括官方客服和工作人员</h3> </div> <div class="footer-connect"> <h2>感谢您使用！</h2> <h3>如有疑问或需要帮助，请联系客服</h3> <div class="footer-img"> <img src="https://d2t9byo8r5tyol.cloudfront.net/images/t.svg"> <img src="https://d2t9byo8r5tyol.cloudfront.net/images/x.svg"> </div> </div> </div> </div> </body> </html>
table布局-表格布局（推荐-兼容性高）
<html> <head> <title>邮件模版</title> </head> <body> <!-- border="1" --> <table width="610" cellspacing="0" cellpadding="0" style="border-spacing: 0; color: #333333; margin-left: auto; margin-right: auto;border-radius: 10px;"> <tr> <td colspan="2" width="610" height="10"> <img src="https://d2t9byo8r5tyol.cloudfront.net/images/head-top.svg" width="610px"> </td> </tr> <tr> <td style="padding: 30px 0 0 30px;"> <img src="images/logo.svg" width="154px"> </td> <td rowspan="3" style="text-align: right;padding-top: 30px;"> <img src="https://d2t9byo8r5tyol.cloudfront.net/images/sketch.svg" width="188px"> </td> </tr> <tr> <td> <h1 style="font-size: 18px; font-weight: 600;color: #000;padding: 50px 0 20px;padding-left: 30px;" th:text="${$1}">Subject</h1> </td> </tr> <tr> <td> <h3 style="font-size: 14px;font-weight: 500;color: #000;padding-left: 30px;" th:if="${not #strings.isEmpty($2)}" th:text="${$2}"> Describe</h3> </h3> </td> </tr> <tr> <td> <h2 style="font-size: 14px; font-weight: 500;color: #000;padding-left: 30px;">验证码:</h2> </td> </tr> <tr> <td colspan="2" style="padding: 0 30px;"> <div style="width: 100%; height: 64px; background-color: #E0FAFE;text-align: center;line-height: 64px;"> <span style="font-size: 32px; font-weight: 600; letter-spacing: 12.8px;" th:text="${$3}">123456</span> </div> </td> </tr> <tr> <td> <h4 style="font-size: 14px; font-weight: 400;color: #000;margin-top: 10px;padding-left: 30px;" th:text="'验证码 ' + ${$4} + ' 分钟内有效,请勿泄露本邮件'">验证码 {} 分钟内有效,请勿泄露本邮件</h4> </td> </tr> <tr> <td> <h4 style="font-size: 14px; font-weight: 400;color: #000;margin-top: 10px;padding-left: 30px;" th:if="${not #strings.isEmpty($5)}" th:text="'防钓鱼码: ' + ${$5}">防钓鱼码: {}</h4> </td> </tr> <tr> <td colspan="2" width="610" height="110"> <img src="https://d2t9byo8r5tyol.cloudfront.net/images/bg.svg" width="610px"> </td> </tr> <tr> <td colspan="2" style="text-align: center;"> <div style="padding-bottom: 40px;"> <h2 style="font-size: 12px; font-weight: 400;color: #000;">AnyView致力于保护您的账户和交易安全</h2> <h3 style="font-size: 12px; font-weight: 400;color: #6C6C6C;">• 如果您怀疑自己收到了诈骗信息，请立即联系客服</h3> <h3 style="font-size: 12px; font-weight: 400;color: #6C6C6C;">• 如果您对邮件的真实性存有疑问，请勿犹豫，立即通过官方客服来核实信息</h3> <h3 style="font-size: 12px; font-weight: 400;color: #6C6C6C;">• 请勿与任何人分享您的验证码，包括官方客服和工作人员</h3> </div> </td> </tr> <tr> <td colspan="2" style="text-align: center;"> <div> <h2 style="font-size: 12px; font-weight: 400;color: #000;padding-bottom: 10px;">感谢您使用！</h2> <h3 style="font-size: 12px; font-weight: 400;color: #6C6C6C;padding-bottom: 32px;">如有疑问或需要帮助，请联系客服</h3> <div style="padding-bottom: 47px;"> <img src="https://d2t9byo8r5tyol.cloudfront.net/images/t.svg" width="30px"> <img style="margin-left: 22px;" src="https://d2t9byo8r5tyol.cloudfront.net/images/x.svg" width="30px"> </div> </div> </td> </tr> </table> </body> </html>
