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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/76107.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

sql server事务隔离别 、 mysql 事务隔离级别、并发性问题

隔离级别和锁 SQL中 mysql 、Oracle 、sql server 等数据库 都是客户端和服务器架构的软件&#xff0c;对于同一个服务器来说&#xff0c;可以有若干个客户端与之连接&#xff0c;每个客户端与服务器连接上之后&#xff0c;就可以称为一个 【会话&#xff08;session&#xff0…

Linkstech多核并行仿真丨光伏发电系统模型及IEEE 39 bus模型多核并行实测

新能源场站和区域电网作为复杂且具有动态特性的大规模电力系统&#xff0c;需要实时仿真测试来验证其性能、稳定性和响应能力。在这种背景下&#xff0c;多核并行仿真运算显得尤为重要。多核并行仿真能够同时处理电力系统的复杂模型&#xff0c;加速仿真过程&#xff0c;实现接…

YOLOV7改进-具有隐式知识学习的Efficient解耦头

[解耦头][https://github.com/z1069614715/objectdetection_script/blob/master/yolo-improve/yolov7-DecoupledHead.py] 1、复制这些到yolo.py 2、到这 3、复制下半部分到yolo.py 4、替换这里 5、最后的加到上面的这里 6、添加 7、添加 8、V5大概一个点的提升 9、解…

Android Jetpack 中Hilt的使用

Hilt 是 Android 的依赖项注入库&#xff0c;可减少在项目中执行手动依赖项注入的样板代码。执行 手动依赖项注入 要求您手动构造每个类及其依赖项&#xff0c;并借助容器重复使用和管理依赖项。 Hilt 通过为项目中的每个 Android 类提供容器并自动管理其生命周期&#xff0c;…

uni-app(微信小程序)图片旋转放缩,文字绘制、海报绘制

总结一下&#xff1a; 要进行海报绘制离不开canvas&#xff0c;我们是先进行图片&#xff0c;文字的拖拽、旋转等操作 最后再对canvas进行绘制&#xff0c;完成海报绘制。 背景区域设置为 position: relative&#xff0c;方便图片在当前区域中拖动等处理。添加图片&#xff0…

MFC 更改控件的大小和位置

获取当前主窗体的位置rect CRect dlgNow;GetWindowRect(&dlgNow);获取某一个控件当前的位置 CRect rect;CButton* pBtn (CButton*)GetDlgItem(IDC_BUTTONXXX);//获取按钮控件pBtn->GetWindowRect(rect);CWnd* pWnd(CWnd*)GetDlgItem(IDC_EDITXXX);//其它控件&#xff0…

基于 Web HID API 的HID透传测试工具(纯前端)

前言 最近在搞HID透传 《STM32 USB使用记录&#xff1a;HID类设备&#xff08;后篇&#xff09;》 。 市面上的各种测试工具都或多或少存在问题&#xff0c;所以就自己写一个工具进行测试。目前来说纯前端方案编写这个工具应该是最方便的&#xff0c;这里放上相关代码。 项目…

MVVM中wpf设置控件是否可见

背景&#xff1a;某个页面基本一样&#xff0c;但是又有点不一样的地方&#xff0c;设置是否可见就可以实现页面的共用 样例Lable 步骤一&#xff1a;资源字典中添加转换器 <Window.Resources><ResourceDictionary><!--用来判断是否隐藏--><BooleanTo…

数据库实现学生管理系统

1.QT将数据库分为三个层次&#xff1a; 1> 数据库驱动层&#xff1a;QSqlDriver、QSqlDriverCreator、QSqlDriverCreatorBase、QSqlDriverPlugin 2> sql接口层&#xff1a;QSqlDatabase、QSqlQuery、QSqlRecord、QSqlError 3> 用户接口层&#xff1a;提供一些模型QSql…

linux非root安装特定版本的cuda

由于一些代码实现&#xff08;cuda写的外部扩展包&#xff09;对cuda版本要求比较高&#xff0c;因此&#xff0c;我在实验室linux系统下默认的cuda版本上&#xff0c;没办法编译扩展包。需要重新安装特定版本的cuda。 一. 首先&#xff0c;需要查看系统版本&#xff1a; lsb…

Python模板注入

概念 发生在使用模板引擎解析用户提供的输入时。模板注入漏洞可能导致攻击者能够执行恶意代码或访问未授权的数据。 模板引擎可以让&#xff08;网站&#xff09;程序实现界面与数据分离&#xff0c;业务代码与逻辑代码分离。即也拓宽了攻击面&#xff0c;注入到模板中的代码可…

LabVIEW利用人工神经网络辅助进行结冰检测

LabVIEW利用人工神经网络辅助进行结冰检测 结冰对各个领域构成重大威胁&#xff0c;包括但不限于航空航天和风力涡轮机行业。在起飞过程中&#xff0c;飞机机翼上轻微积冰会导致升力降低25%。研究报告称&#xff0c;涡轮叶片上的冰堆积可在19个月的运行时间内造成29MWh的功率损…

【微服务部署】四、Jenkins一键打包部署NodeJS(Vue)前端项目步骤详解

本文介绍使用Jenkins一键将NodeJS&#xff08;Vue&#xff09;前端项目打包并上传到生产环境服务器&#xff0c;这里使用的是直接打包静态页面&#xff0c;发送到远程服务器Nginx配置目录的方式&#xff0c;首先确保服务器环境配置好&#xff0c;安装Nginx&#xff0c;运行目录…

【线上问题】linux部署docker应用docker-compose启动报端口占用问题(感觉上没有被占用)

目录 一、问题说明二、排查过程 一、问题说明 1.linux服务器使用的不是root用户权限 2.docker应用服务没有关闭的情况下&#xff0c;做了些重装docker&#xff0c;重启docker等操作 3.docker-compose up -d然后docker logs查看日志报端口被占用 4.netstat -ntpl | grep 端口 也…

解决Ubuntu无法安装pycairo和PyGObject

环境&#xff1a;虚拟机Ubuntu20.04&#xff0c;vscode无法安装pycairo和PyGObject 虚拟机Ubuntu20.04&#xff0c;vscode中运行Anaconda搭建的vens 的Python3.8.10 首先在vscode中点击ctrlshiftp&#xff0c;选择Python3.8.10的环境&#xff0c;自动激活Python 最近在搞无人…

LeetCode474. 一和零

474. 一和零 文章目录 [474. 一和零](https://leetcode.cn/problems/ones-and-zeroes/)一、题目二、题解方法一&#xff1a;01背包方法二&#xff1a;01背包三维数组 一、题目 给你一个二进制字符串数组 strs 和两个整数 m 和 n 。 请你找出并返回 strs 的最大子集的长度&…

第 362 场 LeetCode 周赛题解

A 与车相交的点 数据范围小直接暴力枚举 class Solution { public:int numberOfPoints(vector <vector<int>> &nums) {unordered_set<int> vis;for (auto &p: nums)for (int i p[0]; i < p[1]; i)vis.insert(i);return vis.size();} };B 判断能否…

DC/DC开关电源学习笔记(六)开关电源电路集成及封装工艺

(六)开关电源电路集成及封装工艺 1.集成工艺2.模块化3.新方向开关电源电路集成及封装工艺涉及到将电源电路的各个组成部分集成在一个芯片中,并对芯片进行封装的工艺过程。 1.集成工艺 在集成电路设计中,通常会将开关电源的主要功能模块如开关管、变压器、滤波电容、电感等…

普中 51 单片机点亮LED灯

普中 51 单片机 &#xff08;STC89C52RC&#xff09; LED / IO 将LED1进行闪烁操作 为啥要进行延时操作&#xff1f;依据人的肉眼余晖效应&#xff0c; 延时时间不能太短&#xff0c;否则就无法观察到 LED 闪烁 #include "reg52.h" typedef unsigned int u16; //对…

React中父子组件参数传递讲解

文章目录 结合案例&#xff1a;github搜索案例1.父容器代码2.搜索Search子模块代码3.展示Lisi子模块代码 父子参数传递分析1.子(Search)传父(App)2.父(App)传子(List) 结合案例&#xff1a;github搜索案例 案例结果展示如下图 1.父容器代码 import React, { Component } fr…