如何⽤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⽀持各有不同，所以⼀定要多测试再发送，保证样式的正确。如果出现了不兼容的情况，⼀定要耐⼼的使⽤最简单的⽅式进⾏兼容，尽量少⽤特殊标签及⽐较复杂的属性。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。