如何⽤html写好看的邮件内容
邮件中嵌⼊html的注意事项
要制作html格式的邮件,由于邮件客户端对样式的⽀持有限,要兼容很多种浏览器需要注意很多原则
1.邮件使⽤table+css布局
2.邮件主要部分在body内部,所以样式⼀定要写成内嵌的,不能在head标签中写style,也不能外联。如:
<div
id="app"
>
<table
width="100%"
border="0"
cellspacing="0"
cellpadding="0"
>
<tbody>
<tr>
<td>
<table width="100%"border="0"cellpadding="5"cellspacing="0">
<tbody>
<tr>
<td>
<div
class="header"
><img src=""></img></div>
</td>
</tr>
<tr>
<td>
<table
width="100%"
border="0"
cellpadding="5"
cellspacing="0"
>
<tbody>
<tr>
<td>
<span
>
您好,<br />Hello,
table设置内边框</span>
</td>
</tr>
<tr>
<td>
<table
width="100%"
width="100%"
border="0"
cellpadding="5"
cellspacing="0"
>
<tbody>
<tr>
<td>
<span>欢迎订阅《XXX》!</span><br />
<span>
今后我们将为您带来游戏的最新动态、幕后花絮、独家情报,以及其他更多内容。</span
><br />
<span>请点击按钮,确认订阅。</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
3.不能⽤浮动的⽅式定位。position:absolute;float:left;等都不⾏,float在qq邮箱客户端中可以识别,但是在outlook中⽆法识别。
4.表格的border,使⽤table上的border属性,可以在qq浏览器中兼容,但是在outlook中打开是没有边框的,这种情况,我么只能给每⼀个td加⼀个border,在table中使⽤border-collapse:collapse;来合并重复的边框。
<table
width="90%"
border="1px"
style="
color: #000;
margin: 0;
font-size: 14px;
line-height: 24px;
font-family: '微软雅⿊', Helvetica, Arial, sans-serif;
text-align: left;
margin: 40px auto;
border-collapse: collapse;
"
></table>
这样设置border会在outlook中显⽰不出border;
5.为了保证兼容性,需要把邮件的宽度设置为600px,最⼤600px;
6.少⽤img,因为很多邮箱客户端默认不显⽰图⽚,所以,如果需要图⽚的话,⼀定要写好alt和title;
7.背景图⽚,尽量⽤background-color使⽤纯⾊背景,如果⼀定要⽤背景图⽚,使⽤background属性,
<div background=”XXX.png”></div>
8.邮件不⽀持javascript,flash以及⼀些特殊的标签。
由于邮件客户端对css⽀持各有不同,所以⼀定要多测试再发送,保证样式的正确。如果出现了不兼容的情况,⼀定要耐⼼的使⽤最简单的⽅式进⾏兼容,尽量少⽤特殊标签及⽐较复杂的属性。