邮件模版布局

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

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

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

效果图

flex布局

html 复制代码

<!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 复制代码

<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>

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

效果图

flex布局

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