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…...
文章参考链接
文章参考： 前端 echsrt横轴文字过长，…展示【link】js数组去重【link】js数据是String去重【link】js数据是对象去重【link】小程序使用wxml-to-canvas【link】vantui【link】微信小程序使用vantui组件【link】【link】微信小程序，选项卡页面…...
SQLI-labs-第七关
知识点：单引号（）加括号闭合错误的布尔盲注 思路： 寻找注入点 我们首先看一下正常的回显，并没有显示出什么明显的信息 输入?id1 发现报错 输入?id1 -- 还是报错，说明SQL语句的语法错误可能不是单引号闭合…...
腾讯云轻量2核4G5M服务器_CPU内存_流量_带宽_系统盘
腾讯云轻量2核4G5M服务器：CPU内存流量带宽系统盘性能测评：轻量应用服务器2核4G5M带宽，免费500GB月流量，60GB系统盘SSD盘，5M带宽下载速度可达640KB/秒，流量超额按照0.8元每GB支付流量费，轻量2核4…...
从零开始搭建Apache服务器并使用内网穿透技术实现公网访问
Apache服务安装配置与结合内网穿透实现公网访问 文章目录 Apache服务安装配置与结合内网穿透实现公网访问前言1.Apache服务安装配置1.1 进入官网下载安装包1.2 Apache服务配置 2.安装cpolar内网穿透2.1 注册cpolar账号2.2 下载cpolar客户端 3. 获取远程桌面公网地址3.1 登录cpo…...
unordered_map和unordered_set的使用
前言 在C98中，STL提供了底层为红黑树的结构的一系列关联式容器，在查询时效率可以达到logN，即使最差的情况下需要比较红黑树的高度次，当树中的节点较多时，查询的效率也不是很理想，最好的查询是，进…...
javascript【格式化时间日期】
javascript【格式化时间日期】 操作： (1) 日期格式化代码 /*** 日期格式化函数<br/>* 调用格式：需要使用日期对象调用* <p> new Date().Format("yyyy/MM/dd HH:mm:ss"); </p>* param fmt 日期格式* returns {*} 返回格式化…...
CCC数字钥匙设计【NFC】--什么是AID？
1、NFC中的AID是什么？ AID，英文全称为Application Identifier，这是NFC技术中的概念，AID用于唯一标识一个应用。 NFC应用的AID相关操作，包括注册和删除应用的AID、查询应用是否是指定AID的默认应用、获取应用的AID等 …...
变压器耐压试验电压及电源容量的计算
被试变压器的额定电压为（11081. 25%） /10. 5kV， 联接组标号为 YNd11。 试验时高压分接开关置于第 1 分接位置， 即高压侧电压为 126kV， 高、 低压电压比 K1126/（√310. 5） 6. 93。 现以 A 相试验…...
uniapp实现底部弹出菜单选择
其实uniapp有内置的组件，不用自己去实现，类似于这样： uni.showActionSheet({itemList: [菜单一, 菜单二, 菜单三],success: function (res) {console.log(选中了第${res.tapIndex 1}个菜单);},fail: function (res) {console.log(res.errMs…...
14. 线性代数 - 线性方程组
文章目录 线性方程组矩阵行列式全排列和逆序数N阶行列式（非）齐次线性方程Hi，大家好。我是茶桁。 结束了「微积分」部分的学习之后我们稍作休整，今天正式开始另外一部分：「线性代数」的学习。小伙伴们放松完回来要开始紧张起来了。 我们之前说过，不管是哪一个工程学科，根…...
福州公司建设网站/现在百度怎么优化排名
头文件<functional> 预定义的function object 对对象排序或比较时，默认以less<>为比较准则,因此默认的排序操作总是产生升序. … … Function Adapter和Binder 所谓的Function adapter(函数适配器，函数改造器)，指能够将不通的…...
百度云 做网站/公司seo是什么级别
http://www.cnblogs.com/skychen1218/背景本公司是.Net项目，在.Net可选的MQ比较少，主要Kafka和RabbitMQ，RabbitMQ我也是使用多年了，最近的Kafka广告与流行度打得使我也是无法无视，因此也是花了点时间收集了资料做了些对…...
茂名最新疫情/如何进行搜索引擎优化 简答案
一. oracle 数据库启停三个阶段1.1 startup nomount : 启动实例(1) 读取参数文件 (2)分配内存 (3)启动后台进程SQL> startup nomountORACLE instance started.Total System Global Area 849530880 bytesFixed Size 1339824 bytesVariable Size 528485968 bytesDatabase Buff…...
免费发布信息平台网/搜索引擎优化与推广技术
当前，区块链被视为新一代互联网的底层技术，并逐渐应用到金融、物流、传媒等领域。在应用的过程中，区块链网络的运行与维护对算力的要求也越来越高，如今北京市正在建设的区块链算力平台就是支撑区块链场景应用的重要基建之一。 什…...
wordpress 相册调用/最优化方法
<Context path"/test" docBase"D:\workspacemyeclipse6.5\ttt\WebRoot"></Context></Host>...
我学我做我知道网站/网站快速收录技术
本文将根据API文档中关于主题的介绍做的一次演练，以便熟悉自定义主题的过程。练习环境：Sencha Cmd v4.0.1.45Ruby 1.9.3-p392firefox 26首先，使用以下Sencha Cmd命令创建一个名为TestMyTheme的应用程序：sencha -sdk c:\ext4 gener…...