前言：
邮件中html可使用的标签有限，因为一些兼容性问题，布局只能使用table。可参考阮一峰老师的：HTML Email 编写指南
以下只是一个简单的demo，便于学习记录。demo是基于从头开始构建一个 HTML Email 模板 完成的。
源码：
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta content="email=no" name="format-detection" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0">
<title>email模版</title>
</head>
<body style="margin:0; padding:0;">
<!--容器表格-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<!--局中表格-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600"
style="border-collapse: collapse;">
<!--页眉-->
<tr>
<!--
内边距可以用padding：10px 10px 8px 5px;如果有问题的话，可能需要把完整的表达式写出来：padding-top: 10;padding-right: 10px; padding-bottom: 8px; padding-left: 5px;
如果padding完全不能用，比如邮件发送平台剔除了css,作为替代，可以使用一个空白的单元格来创建空白区域。如下：
<td style="font-size: 0; line-height: 0;" height="30" width="20"> </td> 通过width,height来设置空白区域的大小
-->
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;">
<img src="https://i.pinimg.com/originals/8f/c3/7b/8fc37b74b608a622588fbaa361485f32.png"
alt="logo img" width="300" height="230" style="display: block;" />
</td>
</tr>
<!--内容-->
<tr>
<td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;">
<b>Lorem ipsum dolor sit amet!</b>
</td>
</tr>
<tr>
<td style="padding: 20px 0 30px 0;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing
felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan
dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
<tr>
<!--
margin不备支持，如果想在两个单元格之间有空白的话，可以通过空白单元格做margin
colspan或者rowspan标签也不能使用
-->
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="260" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="https://png.pngtree.com/element_pic/17/07/28/cc89d4e74bc4bd0cd704c7218943ab02.jpg"
alt="" width="100%" height="180"
style="display: block;" />
</td>
</tr>
<tr>
<td style="padding: 25px 0 0 0;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In tempus adipiscing felis, sit amet blandit ipsum
volutpat sed. Morbi porttitor, eget accumsan dictum,
nisi libero ultricies ipsum, in posuere mauris neque at
erat.
</td>
</tr>
</table>
</td>
<td style="font-size: 0; line-height: 0;" width="20">
</td>
<td width="260" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="https://png.pngtree.com/element_pic/17/07/28/cc89d4e74bc4bd0cd704c7218943ab02.jpg"
alt="" width="100%" height="180"
style="display: block;" />
</td>
</tr>
<tr>
<td style="padding: 25px 0 0 0;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In tempus adipiscing felis, sit amet blandit ipsum
volutpat sed. Morbi porttitor, eget accumsan dictum,
nisi libero ultricies ipsum, in posuere mauris neque at
erat.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--页脚-->
<tr>
<td bgcolor="#ee4c50" style="padding: 20px 30px 20px 30px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;">
® Someone, somewhere 2013<br />
<a href="#" style="color: #ffffff;">
<font color="#ffffff">Unsubscribe</font>
</a> to this newsletter instantly
</td>
<td align="right">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="http://www.twitter.com/">
<img src="https://png.pngtree.com/element_our/md/20180518/md_5aff6081c9e3b.jpg"
alt="Twitter" width="38" height="38" style="display: block;"
border="0" />
</a>
</td>
<td style="font-size: 0; line-height: 0;" width="20"> </td>
<td>
<a href="http://www.twitter.com/">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLfta6Aum7LAtA2eLvuZAFWMtzRH2LfUoOyA&usqp=CAU"
alt="Facebook" width="38" height="38"
style="display: block;" border="0" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
效果：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
