适合邮件模板HTML outlook,163,qq邮箱,企业邮箱等

最近在弄的一个邮件模板搞得自己头都大了,兼容大部分的邮件厂家,其中的outlook简直丧心病狂.

基本上很多样式都不能操作,在pc客户端打开时候跟自己想要的效果天差地别,也在查看了好多文章之后,这个outlook是用word布局显示,所以在实现之后最简单的就用word打开看下效果,就知道在outlook上面显示成什么了.

①这里推荐使用table布局,这种可以在outlook上面显示正常,在其他方面也是没多大影响

②在使用html标签时使用最基本的标签,很多邮件模板不支持

③使用css时要使用内嵌式,不要嫌麻烦,很多时候各个邮件厂家的支持度都不尽相同,这是保障

④最好使用css2样式,基本就是要用最原始的来处理

⑤最好给整个table定好宽度,不会因为内容部的挤占导致整个变形(这里的宽度在样式外面,不要写在样式里面)

即<table width="900"></table>,不要写成<table style=" width: 900px;"></table>

像这种写在style里面的在部分邮件厂商里面是不生效的(如163邮箱,qq邮箱,企业微信里面的邮箱等)

⑥在定义table宽度时候最好不要写单位,要不可能显示各不相同,效果可能就天差地别

⑦在定义字体时候最好要定义为英文格式如:font-family: 'Microsoft YaHei';不要写成font-family: 微软雅黑;

⑧个人建议,自己要对照要求自己画个草图,定义好要放置什么东西要放置空格,给自己在操作时候有更好的操作.

上效果图:

代码部分:

<html>
<body>
<table align="center" cellpadding="0" cellspacing="0" width="900" style="margin:0 auto;border:3px solid #e7e2ef;border-collapse:collapse;box-shadow:0 4px 8px 0 #aaaaaa; font-size: 14px; font-family: Microsoft YaHei; "><tr height="10">
<td colspan="10" style="background-color:#e7e2ef;"></td>
</tr>
<tr height="">
<td width="45" height="67" style="background-color:#e7e2ef;"> </td>
<td height="67" colspan="8" style="background-color:#e7e2ef;">
<div style="background-color:#e7e2ef; width:100%"><img alt="logo" title=""src="https://" height="67" width="250" /></div>
</td>
<td width="45" height="67" style="background-color:#e7e2ef;"> </td>
</tr>
<tr height="10">
<td colspan="10" style="background-color:#e7e2ef;"></td>
</tr>
<!-- 头部结束 -->
<tr>
<td width="45" height="50"> </td>
<td height="" colspan="8"><!-- 这里内容部分-->
<span>用戶號:{7}，客戶號：{0}的資金提取已處理，渠道號：{1}，客戶開戶淨資產資：{2}，發生金額{3}，幣種（{4}），備註信息：{5}</span><!-- 这里内容部分结束--></td>
<td width="45" height="50"> </td>
</tr>
<!-- 中间结束 -->
<tr height="15">
<td colspan="10" style="background-color:#e7e2ef;"></td>
</tr>
<!-- 中间部分结束 -->
<tr style="background-color:#e7e2ef;">
<td width="45" height="50"> </td>
<td colspan="8">
<span style="width: 120px;height: 35px;background: #e7e2ef;border-radius: 20px;font-size: 18px;text-align: center;display: inline-block;line-height: 35px;border: 1px solid #787878;">&nbsp;&nbsp;谢谢谢谢&nbsp;&nbsp;</span>
</td>
<td width="45" height="50"> </td>
</tr>
<tr height="10">
<td colspan="10" style="background-color:#e7e2ef;"></td>
</tr>
<tr style="background-color:#e7e2ef;">
<td width="45" height="100"> </td>
<td width="50" colspan="1" valign="top">
<div>
<img alt="圖標"src=""style="float: none; margin-left: auto; margin-right: auto;" width="20" height="20" />
</div>
</td>
<td colspan="7" valign="top">
<span style="font-size: 16px; font-family: Microsoft YaHei;">中国陆地面积约960万平方千米，东部和南部大陆海岸线1.8万多千米，海域总面积约473万平方千米 [2]  。海域分布有大小岛屿7600多个，其中台湾岛最大，面积35798平方千米 [2]  。中国同14国接壤，与8国海上相邻。省级行政区划为23个省、5个自治区、4个直辖市、2个特别行政区。</span>
<br>
<span style="font-size: 16px; font-family: Microsoft YaHei;">中国陆地面积约960万平方千米，东部和南部大陆海岸线1.8万多千米，海域总面积约473万平方千米 [2]  。海域分布有大小岛屿7600多个，其中台湾岛最大，面积35798平方千米 [2]  。中国同14国接壤，与8国海上相邻。省级行政区划为23个省、5个自治区、4个直辖市、2个特别行政区。</span>
</td>
<td width="45" height="100"> </td>
</tr>
<tr height="10">
<td colspan="10" style="background-color:#e7e2ef;"></td>
</tr>
<tr style="background-color:#e7e2ef;">
<td width="45" height="50"> </td>
<td colspan="8">
<span style="width: 120px;height: 35px;background: #e7e2ef;border-radius: 20px;font-size: 18px;text-align: center;display: inline-block;line-height: 35px;border: 1px solid #787878;">&nbsp;&nbsp;谢谢谢谢&nbsp;&nbsp;</span>
</td><td width="45" height="50"> </td>
</tr>
<tr height="10">
<td colspan="10" style="background-color:#e7e2ef;"></td>
</tr><tr style="background-color:#e7e2ef;">
<td width="45" height="80"> </td>
<td width="45" colspan="1" valign="top">
<div>
<img alt="圖標"src=""style="float: none; margin-left: auto; margin-right: auto;" width="20" height="20" />
</div>
</td>
<td colspan="7" valign="top">
<spanstyle="font-size: 16px; font-family: Microsoft YaHei;">中国陆地面积约960万平方千米，东部和南部大陆海岸线1.8万多千米，海域总面积约473万平方千米 [2]  。海域分布有大小岛屿7600多个，其中台湾岛最大，面积35798平方千米 [2]  。中国同14国接壤，与8国海上相邻。省级行政区划为23个省、5个自治区、4个直辖市、2个特别行政区。</span>
<br>
<span style="font-size: 16px; font-family: Microsoft YaHei;">中国陆地面积约960万平方千米，东部和南部大陆海岸线1.8万多千米，海域总面积约473万平方千米 [2]  。海域分布有大小岛屿7600多个，其中台湾岛最大，面积35798平方千米 [2]  。中国同14国接壤，与8国海上相邻。省级行政区划为23个省、5个自治区、4个直辖市、2个特别行政区。</span>
</td>
<td width="45" height="80"> </td>
</tr><tr style="background-color:#e7e2ef;">
<td width="45" height="120"> </td>
<td width="45" colspan="1" valign="top">
<div>
<img alt="圖標"src=""style="float: none; margin-left: auto; margin-right: auto;" width="20" height="20" />
</div>
</td>
<td colspan="7" valign="top">
<span style="font-size: 16px; font-family: Microsoft YaHei;">中国陆地面积约960万平方千米，东部和南部大陆海岸线1.8万多千米，海域总面积约473万平方千米 [2]  。海域分布有大小岛屿7600多个，其中台湾岛最大，面积35798平方千米 [2] </span>
<br>
<span style="font-size: 16px; font-family: Microsoft YaHei;">中国陆地面积约960万平方千米，东部和南部大陆海岸线1.8万多千米，海域总面积约473万平方千米 [2]  。海域分布有大小岛屿7600多个，其中台湾岛最大，面积35798平方千米 [2] </span>
<br>
</td>
<td width="45" height="120"> </td>
</tr>
<tr style="background-color:#e7e2ef;">
<td width="45" height="50"> </td>
<td width="45"colspan="1" valign="top">
<div>
<img alt="圖標"src=""style="float: none; margin-left: auto; margin-right: auto;" width="20" height="20" /></div>
</td>
<td colspan="7" valign="top">
<span style="font-size: 16px; font-family: Microsoft YaHei;">中国陆地面积约960万平方千米，东部和南部大陆海岸线1.8万多千米，海域总面积约473万平方千米 [2] </span>
<br>
<span style="font-size: 16px; font-family: Microsoft YaHei;">中国陆地面积约960万平方千米，东部和南部大陆海岸线1.8万多千米，海域总面积约473万平方千米 [2] </span>
</td>
<td width="45" height="50"> </td>
</tr>
<tr style="background-color:#e7e2ef;">
<td width="45" height="50"> </td>
<td width="45"colspan="1" valign="top">
<div>
<img alt="圖標"src=""style="float: none; margin-left: auto; margin-right: auto;" width="20" height="20"  /></div>
</td>
<td colspan="7" valign="top">
<span style="font-size: 16px; font-family: Microsoft YaHei;">中国陆地面积约960万平方千米，东部和南部大陆海岸线1.8万多千米，海域总面积约473万平方千米 [2]  </span>
<br>
<span style="font-size: 16px; font-family: Microsoft YaHei;">中国陆地面积约960万平方千米，东部和南部大陆海岸线1.8万多千米，海域总面积约473万平方千米 [2]  </span>
</td>
<td width="45" height="50"> </td>
</tr>
<tr style="background-color:#e7e2ef;">
<td width="45" height="50"> </td>
<td width="45" colspan="1" valign="top">
<div>
<img alt="圖標"src=""style="float: none; margin-left: auto; margin-right: auto;" width="20" height="20" /></div>
</td>
<td colspan="7" valign="top">
<span style="font-size: 16px; font-family: Microsoft YaHei;">中国陆地面积约960万平方千米，东部和南部大陆海岸线1.8万多千米，海域总面积约473万平方千米 [2]  </span>
<br>
<span style="font-size: 16px; font-family: Microsoft YaHei;">中国陆地面积约960万平方千米，东部和南部大陆海岸线1.8万多千米，海域总面积约473万平方千米 [2]  </span>
</td>
<td width="45" height="50"> </td>
</tr>
<tr height="10">
<td colspan="10" style="background-color:#e7e2ef;"></td>
</tr>
</table>
</body>
</html>

说明:可以在这基础上面进行修改,其中的src为图片连接,我这里删除了,可以改成自己需要的

适合邮件模板HTML outlook,163,qq邮箱,企业邮箱等相关推荐

记录一下开发邮件模板兼容outlook客户端以及其他主流邮箱客户端所引发的无数问题，头发要薅没了
最近整了一个钓鱼网站,然后会发送模板邮件,模板内容如下等等诸如此类的样式布局,这个直接用原生的html+css写的模板内容,发送邮件之后在邮箱里面显示的很正常,结果出现了一个outlook邮箱. 这 ...
outlook添加腾讯企业邮箱报错：无法访问此账户可能需要更新密码或授予账户同步到此设备的权限
文章目录一:问题描述二:问题分析三:问题解决 1.密码问题: 2.特殊设置: 如有疑问可评论区交流! 一:问题描述有时还会提示:无法访问此账户可能需要更新密码或授予账户同步到此设备的权限二 ...
邮箱批量登录接验证码_记一次莫名的需求（临时邮箱|企业邮箱）
目录: 前言行情伪需求过程 1.前戏 2.买域名 3.网易企业邮箱 4.模糊的需求 5.晚饭后 6.临时邮箱1 6.临时邮箱2 7.域名版临时邮箱 8.遇见问题 8.1.DNSPOD 8.2.换 ...
外贸好用常用的邮箱哪个好？海外电子邮箱企业邮箱申请
外贸邮箱注册,好用常用的邮箱有TOM.网易.QQ等,但申请企业邮箱个人建议使用直销服务的TOM企业邮箱.我么最喜欢他家的微信收发邮件工具--随心邮,接下就给大家攻略下外贸邮箱使用随心邮的好处. 外贸好 ...
django项目 html报表和excel报表写入并通过邮件发送到outlook和QQ邮箱
目录 demo2项目 html报表效果将报表写入excel,并使用邮件发送QQ邮箱和outlook邮箱效果[动图时长1分多钟] demo2项目完整文件夹结构 sql.py文件上半部分 sql.py文 ...
网易邮箱邮件服务器问题导致收信延迟,企业邮箱使用客户端收信有延迟解决方案...
使用问题您的位置: 首页> 使用问题企业邮箱使用客户端收信有延迟解决方案发布时间:2019-04-10 使用第三方客户端软件(如 Foxmail .Outlook 等)通过 POP3 协议 ...
电子邮件格式模板怎么写，如何在企业邮箱官网注册邮箱？
随着网络技术的发展,许多公司都开始使用了更正式的企业邮箱作为沟通工具.在使用企业邮箱时,最重要的一点就是要注意邮件的格式模板是否正确,一封得体的电子邮件能让你的客户或是领导更欣赏你的工作态度.那么,电 ...
qq 企业邮箱 php群发邮件,PHP使用QQ免费企业邮箱发送邮箱的代码
对于小企业来说,免费的企业邮箱是不错的选择,省去服务器费用和人员维护费用.在这里说一下,qq的免费企业邮箱. 一,注册账号网址:http://exmail.qq.com 注册账号,一定要有自己的域名 ...
【邮件服务】hutool发送腾讯企业邮箱案例
目录一.hutool发送腾讯企业邮箱 1. 引入依赖 2. 配置resources/config/mail.setting 3. 发送实例,更多参考hutool邮件发送文档 4. 发送结果参考 ...

适合邮件模板HTML outlook,163,qq邮箱,企业邮箱等

适合邮件模板HTML outlook,163,qq邮箱,企业邮箱等相关推荐

最新文章

热门文章