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

企业开发 2023-09-13 17:20:36 阅读次数: 0

邮件模版布局

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>

猜你喜欢

转载自blog.csdn.net/JackieDYH/article/details/132734952
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022