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…...
网络编程（Modbus进阶）
思维导图 Modbus RTU（先学一点理论） 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议，由 Modicon 公司（现施耐德电气）于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
后进先出（LIFO）详解
LIFO 是 Last In, First Out 的缩写，中文译为后进先出。这是一种数据结构的工作原则，类似于一摞盘子或一叠书本： 最后放进去的元素最先出来 -想象往筒状容器里放盘子： （1）你放进的最后一个盘子（…...
练习（含atoi的模拟实现,自定义类型等练习）
一、结构体大小的计算及位段 （结构体大小计算及位段 详解请看：自定义类型：结构体进阶-CSDN博客） 1.在32位系统环境，编译选项为4字节对齐，那么sizeof(A)和sizeof(B)是多少？ #pragma pack(4)st…...
服务器硬防的应用场景都有哪些？
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式，避免服务器受到各种恶意攻击和网络威胁，那么，服务器硬防通常都会应用在哪些场景当中呢？ 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...
从零实现STL哈希容器：unordered_map/unordered_set封装详解
本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说，直接开始吧！ 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...
DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API，查询的是单条数据，比如根据主键ID查询用户信息，sql如下： select id, name, age from user where id #{id}API默认返回的数据格式是多条的，如下： {&qu…...
爬虫基础学习day2
# 爬虫设计领域 工商：企查查、天眼查短视频：抖音、快手、西瓜 ---> 飞瓜电商：京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空：抓取所有航空公司价格 ---> 去哪儿自媒体：采集自媒体数据进…...
AI书签管理工具开发全记录（十九）：嵌入资源处理
1.前言 📝 在上一篇文章中，我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源，方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包，彻底改变了静态资源管理的…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容（一）CDN 基础概念1. 定义2. 组成部分 （二）CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 （三）CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
Xen Server服务器释放磁盘空间
disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...