邮件模版布局
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>