html实现邮件模版布局-flex布局table布局-demo
邮件模版布局
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>