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

个人新城

已于 2023-02-22 10:49:50 修改

阅读量2.9k

点赞数 1

文章标签： css 前端

于 2023-02-22 10:29:39 首次发布

本文链接：https://blog.csdn.net/m0_45425492/article/details/129155926

版权

最近在弄的一个邮件模板搞得自己头都大了,兼容大部分的邮件厂家,其中的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">
<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="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为图片连接,我这里删除了,可以改成自己需要的