html嵌入到第三方邮件系统中，很多h5标签、css3不支持。一般布局采用table+css。tabel表兼容性最好，写行内样式
<!DOCTYPE html> <html> <head lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <table cellpadding="0" cellspacing="0" width="650" border="0" align="center" height="68" bgcolor="#f3f3f3" style=" font-family:Arial, Helvetica, sans-serif;"> <tr> <td align="left" height="30"> <a href="mailto:customer_service@jd.com" target="_blank"><img src="images/logo.png" alt="" style="max-width:30%;" border="0"/></a> </td> </tr> </table> <table cellpadding="0" cellspacing="0" width="650" border="0" align="center" bgcolor="#f3f3f3" style=" font-family:Arial, Helvetica, sans-serif;"> <tr> <td width="100%" height="200px;"><img src="images/email-ban1.png" alt="" style="width:100%;height:100%;" border="0" /></td> </tr> </table> <table cellpadding="0" cellspacing="0" width="650" border="0" align="center" bgcolor="#f3f3f3" style="font-size:16px;" style=" font-family:Arial, Helvetica, sans-serif;"> <tr> <td width="5%" height="12"></td> <td width="90%" height="12"></td> <td width="5%" height="12"></td> </tr> <tr> <td width="5%" height="35"></td> <td width="90%" height="35">亲爱的用户:</td> <td width="5%" height="35"></td> </tr> <tr> <td width="5%" height="8"></td> <td width="90%" height="8"></td> <td width="5%" height="8"></td> </tr> <tr> <td width="5%" height="33"></td> <td width="90%" style="text-indent:2em"> 邮箱内容邮箱内容邮箱内容邮箱内容邮箱内容邮箱内容邮箱内容邮箱内容邮箱内容邮箱 内容邮箱内容邮箱内容邮箱内容邮箱内容邮箱内容邮箱内容邮箱内容邮箱内容邮箱内容 邮箱内容邮箱内容邮箱内容邮箱内容邮箱内容邮箱内容 <img src="images/email-ban1.png" alt="" width="100%" border="0" style="margin:5px 0;max-width:100%;"/> </td> <td width="5%" height="33" style="color:#fff;"></td> </tr> <tr> <td width="5%" height="10"></td> <td width="90%" height="10"> </td> <td width="5%" height="10"></td> </tr> <tr> <td width="5%" height="33"></td> <td width="90%" align="right"> 某某部门 </td> <td width="5%" height="33"></td> </tr> <tr> <td width="5%" height="15"></td> <td width="90%" height="15"></td> <td width="5%" height="15"></td> </tr> </table> <table cellpadding="0" cellspacing="0" width="650" align="center" bgcolor="#f3f3f3" style="border-top:4px solid #ffbc5c;color:#666;font-size:14px;font-family:Arial, Helvetica, sans-serif;"> <tr> <td width="5%" height="30"></td> <td width="50%" height="30"> </td> <td width="45%" height="30"></td> </tr> <tr> <td width="5%" height="30"></td> <td width="50%" height="30" align="left"> 随便写啊随便写 </td> <td width="45%" rowspan="3" align="center"> <img src="images/le-qrcode.jpg" alt="" border="0" width="120" height="120" /> <br> 微信扫一扫 </td> </tr> <tr> <td width="5%" height="30"></td> <td width="50%" height="30" align="left"> 联系电话:XXX-XXX-XXXX </td> </tr> <tr> <td width="5%" height="30"></td> <td width="50%" height="30" align="left"> QQ：123456789 邮箱:XXXXXXX.com </td> </tr> </table > <table cellpadding="0" cellspacing="0" width="650" align="center" bgcolor="#f3f3f3" style="color:#333;font-size:16px;font-family:Arial, Helvetica, sans-serif;"> <tr> <td width="5%" height="35"></td> <td width="90%" height="35" rowspan="3" align="center"> 宣传语宣传语宣传语宣传语宣传语宣传语 </td> <td width="5%" height="35"></td> </tr> </table > </body> </html>
原文：https://www.cnblogs.com/linjiu0505/p/10949406.html