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…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板，载入页面后，会显示引导弹窗，适用于引导用户使用页面，点击完成后，会显示下一个引导弹窗，直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中，iftop是网络管理的得力助手，能实时监控网络流量、连接情况等，帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
无法与IP建立连接，未能下载VSCode服务器
如题，在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈，发现是VSCode版本自动更新惹的祸！！！ 在VSCode的帮助->关于这里发现前几天VSCode自动更新了，我的版本号变成了1.100.3 才导致了远程连接出…...
OkHttp 中实现断点续传 demo
在 OkHttp 中实现断点续传主要通过以下步骤完成，核心是利用 HTTP 协议的 Range 请求头指定下载范围： 实现原理 Range 请求头：向服务器请求文件的特定字节范围（如 Range: bytes1024-） 本地文件记录：保存已…...
如何为服务器生成TLS证书
TLS（Transport Layer Security）证书是确保网络通信安全的重要手段，它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书，可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
C++ 求圆面积的程序（Program to find area of a circle）
给定半径r，求圆的面积。圆的面积应精确到小数点后5位。 例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。 输…...
项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）
Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败，具体原因是客户端发送了密码认证请求，但Redis服务器未设置密码 1.为Redis设置密码（匹配客户端配置） 步骤： 1）.修…...
企业如何增强终端安全？
在数字化转型加速的今天，企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机，到工厂里的物联网设备、智能传感器，这些终端构成了企业与外部世界连接的 “神经末梢”。然而，随着远程办公的常态化和设备接入的爆炸式…...
在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案
这个问题我看其他博主也写了，要么要会员、要么写的乱七八糟。这里我整理一下，把问题说清楚并且给出代码，拿去用就行，照着葫芦画瓢。 问题 在继承QWebEngineView后，重写mousePressEvent或event函数无法捕获鼠标按下事…...