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>相关文章：
html实现邮件模版布局-flex布局table布局-demo
邮件模版布局 flex - 布局简单方便 兼容性差 table - 优点 就是兼容性好，其他没有优点 注：使用图片需要png最好，使用svg图google邮箱会出现不能使用的情况 效果图 flex布局 <!DOCTYPE html> <html lang"en" xmlns:th&qu…...
CENTOS7安装redis在/home/pms/software路径下，并且将redis加入到systemctl中
要将/home/software/redis-stack-server-7.2.0-v0/service/redis.service添加到systemctl系统管理，你可以执行以下步骤： 创建软连接： sudo ln -s /home/software/redis-stack-server-7.2.0-v0/service/redis.service /etc/systemd/system/r…...
数据库笔记
数据库原理及应用 半期考：运筹学，概率论，数据库 文章目录 数据库原理及应用1.课程的考核2.数据库的运用3.数据库学什么？ 第一章 绪论1.1数据库系统概述1.1.1基本概念1.1.2数据管理技术的生产和发展人工管理文件系统数据库系统 1.…...
AI是风口还是泡沫？
KlipC报道：狂热的人工智能追捧潮有所冷静，投资者在“上头”的追涨之后，开始回归到对基本面的关注。 KlipC的合伙人Andi D表示：“近日，有关英伟达二季度“破纪录”财报涉嫌造假的话题正在社交媒体和投资者论坛中甚嚣尘上…...
echarts环图配置
echarts环图配置 1、安装echarts npm install echarts4.9.02、页面引入echarts import echarts from echarts;3、应用 template片段 <div class"chart-wrap"><div id "treeChart" style "width: 180px; height:180px;" ><…...
Redis优化 RDB AOF持久化
---------------------- Redis 高可用 ---------------------------------------- 在web服务器中，高可用是指服务器可以正常访问的时间，衡量的标准是在多长时间内可以提供正常服务（99.9%、99.99%、99.999%等等）。 但是在Redis语境…...
三维模型3DTILE格式轻量化压缩主要技术方法浅析
三维模型3DTILE格式轻量化压缩主要技术方法浅析 三维模型3DTILE格式轻量化压缩主要技术方法浅析 随着三维地理空间数据的应用日益广泛，为了更快速地传输和存储这些大规模数据，3DTile格式的轻量化压缩显得尤为重要。本文将浅析关于三维模型3DTile格式轻量…...
c++day2---9.7
1> 思维导图 2> 封装一个结构体，结构体中包含一个私有数组，用来存放学生的成绩，包含一个私有变量，用来记录学生个数， 提供一个公有成员函数，void setNum(int num)用于设置学生个数 提供一个公有成员…...
地震反演基础知识2(代码演示)
文章目录 数据集代码演示1. SEG盐真实数据2. SEG盐速度模型3. SEG盐模拟地震数据4. SEG盐模拟速度模型5. openfwi地震数据6. openfwi速度模型 数据集代码演示 1. SEG盐真实数据 # 绘制SEG盐层数据的地震图像 def pain_seg_seismic_data(para_seismic_data):Plotting seismic …...
C#学习 - 方法的定义、调用、调试
方法 方法（Method）是由C/C中的函数（Function）发展而来的 //C语言 #include <stdio.h> int Add(int x, int y) {return x y; }//函数 int main(void) {int a 4;int b 2;int c Add(a, b);printf("%d %d %d\n&quo…...
『PyQt5-Qt Designer篇』｜ 09 Qt Designer中分割线和间隔如何使用？
09 Qt Designer中分割线和间隔如何使用？ 1 间隔1.1 水平间隔1.2 垂直间隔2 分割线2.1 水平线2.2 垂直线3 保存并执行1 间隔 间隔有水平间隔和垂直间隔： 1.1 水平间隔 拖动4个按钮，并设置为水平布局： 在第一个按钮的右边添加一个水平间隔： 设置其sizeType为Fixed，宽度为20…...
基于springboot2+mybatis-plus+jsp增删改查
概述 编写简单增删改查，理解之后可以自己试着扩展，相信你也可以，加油，我自己懂了的用注释记在下面方便理解 详细 一、需求（要做什么） 基于现今最流行的技术实现增删改查demo， 便于初学者上手…...
[PHP]empty一直返回true
class Post {public function __get($key){return true;} }$post new Post(); var_dump(empty($post->a));// bool(true) PHP: 重载 - Manual 读取不可访问（protected 或 private）或不存在的属性的值时，__get() 会被调用。 当对不可访…...
[2023.09.11]: Yew的SSR中的Cargo.toml配置
由于各种原因，我最后还是打算把Yew应用的开发从csr模式转成ssr模式。没想到这里面的水还是挺深的，这里面的Cargo.toml配置包含的信息量之大，着实让我头疼了一番。 Cargo.toml的配置如下 [package] name "app" version "0.…...
HTTPS加密协议详解：HTTPS性能与优化
1、HTTPS性能损耗 前文讨论了HTTPS原理与优势：身份验证、信息加密与完整性校验等，且未对TCP和HTTP协议做任何修改。但通过增加新协议以实现更安全的通信必然需要付出代价，HTTPS协议的性能损耗主要体现如下： (1).增加延时 分析前…...
9月11日，每日信息差
今天是2023年09月11日，以下是为您准备的13条信息差 第一、微软已停止向俄罗斯提供服务，俄罗斯接下来的举动震惊世人！对此俄罗斯回应称，他们将把微软的收费版改为免费版并推广至全球 第二、我国首套海洋漂浮式温差能发电装置完成…...
RHCSA-VM-Linux基础配置命令
1.代码命令 1.查看本机IP地址： ip addr 或者 ip a [foxbogon ~]$ ip addre [foxbogon ~]$ ip a 1：<Loopback,U,LOWER-UP> 为环回2网卡 2: ens160: <BROADCAST,MULTICAST,UP,LOWER_UP>为虚拟机自身网卡 2.测试网络联通性： [f…...
Web安全研究（四）
No Honor Among Thieves: A Large-Scale Analysis of Malicious Web Shells Stony Brook University Ruhr-University Bochum Web shell作为恶意脚本，攻击者将其上传到被攻陷的Web服务器，以远程执行任意命令、维护其访问权限并提升其特权。尽管在实践中它…...
【CS324】Large Language Models（持续更新）
note 文章目录 note一、引言二、大模型的能力三、大模型的有害性（上）四、大模型的有害性（下）五、大模型的数据Reference 一、引言 语言模型最初是在信息理论的背景下研究的，可以用来估计英语的熵。 熵用于度量概率分布…...
【学习笔记】「2020-2021 集训队作业」Communication Network
有点难😅 发现容斥系数设计的非常巧妙🤔 设 f ( i ) f(i) f(i)表示恰好有 i i i条边相同的方案数， g ( i ) g(i) g(i)表示至少有 i i i条边相同的方案数 根据二项式反演， g ( i ) ∑ j ≥ i ( j i ) f ( j ) ⇒ f ( i ) ∑ j…...
4个QtScrcpy键鼠映射技巧实现手游操控精准化
4个QtScrcpy键鼠映射技巧实现手游操控精准化 【免费下载链接】QtScrcpy Android实时投屏软件，此应用程序提供USB(或通过TCP/IP)连接的Android设备的显示和控制。它不需要任何root访问权限 项目地址: https://gitcode.com/barry-ran/QtScrcpy 手游操控一直是移…...
Redis 集群模式：核心问题与深度运维指南
前言：为什么要写这篇笔记？在最近的一次技术面试中，面试官问到了“Redis 集群模式下的常见问题及解决方案”。坦白说，虽然我在项目中一直使用 Redis，但由于现有的业务规模尚未达到触发集群极端瓶颈的程度，导…...
【限时开放】Mojo-Python互操作安全边界图谱（2024 Q3最新CVE影响评估+3类高危反模式代码扫描规则），错过将无法适配Mojo v1.2+运行时
第一章：Mojo-Python互操作安全边界图谱概览Mojo 作为面向 AI 原生开发的系统级编程语言，其与 Python 的互操作并非简单语法兼容，而是在运行时、内存模型、类型系统与异常传播四个维度上构建了显式、可审计的安全边界。这些边界共同构成一张动…...
本地图片检索新方案：ImageSearch完全使用指南
本地图片检索新方案：ImageSearch完全使用指南 【免费下载链接】ImageSearch 基于.NET8的本地硬盘千万级图库以图搜图案例Demo和图片exif信息移除小工具分享 项目地址: https://gitcode.com/gh_mirrors/im/ImageSearch 当你的电脑中存储了成千上万张图片&…...
大模型进阶：掌握Function Calling和MCP，解锁AI生产力（收藏版）
本文深入探讨了Function Calling技术如何帮助大模型获取实时信息、执行任务，以及MCP协议在大模型与外部交互中的关键作用。文章阐述了从提示工程到RAG，再到Function Calling和MCP的技术演进路径，强调了这些技术如何使大模型从信息工具转变为生…...
一本计算机专业，准大一，有什么忠告？
你现在大概处于一种很特别的状态。高考刚结束不久，录取通知书拿到了，专业是计算机。可能是你自己选的，也可能是家里建议的，也可能是分数刚好够就填了。不管哪种，你现在对”计算机专业到底学什么”的理解大概率是模糊的…...
ssm+java2026年毕设司库管理系统【源码+论文】
本系统（程序源码）带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容一、选题背景关于企业理财与融资管理问题的研究，现有研究主要以大型企业ERP系统或通用财务管理软件为主，专门针对中…...
MoMask终极指南：5分钟学会AI生成3D人体运动动画
MoMask终极指南：5分钟学会AI生成3D人体运动动画 【免费下载链接】momask-codes Official implementation of "MoMask: Generative Masked Modeling of 3D Human Motions (CVPR2024)" 项目地址: https://gitcode.com/gh_mirrors/mo/momask-codes 想…...
GCC编译选项详解与工程实践指南
GCC编译选项深度解析与工程实践指南1. 编译选项基础概念1.1 编译过程与选项作用GCC编译过程分为预处理、编译、汇编和链接四个阶段。编译选项通过控制这些阶段的行为，实现不同的编译目标：# 完整编译流程示例 gcc -E main.c -o main.i # 预处理 gcc -S…...
避坑指南：Prescan8.5安装常见报错解决方案（含MATLAB集成配置）
Prescan8.5安装避坑指南：7类典型报错与MATLAB集成深度解析 当仿真工程师第一次打开Prescan8.5安装包时，很少有人能预料到接下来可能遭遇的"技术迷宫"。作为自动驾驶仿真领域的重要工具，Prescan的安装过程就像它的功能一样复杂——从…...