我正在使用Foundation Framework制作自定义响应式电子邮件。我想实现截图中显示的布局。关于如何实现这一点的任何建议,使用Foundation(或者甚至可以这样做?请记住,这应该适用于所有主要邮件客户端)
提前致谢!
答案 0 :(得分:1)
如果您正在寻找HTML解决方案,那么下面是您可以使用的代码。
它粗糙,但使用你的视觉提供了一个想法。
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#17b0de" style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; padding:47px 0px; text-align:center; font-size:80px;color:#ffffff;">ROW 1</td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="55" height="190" bgcolor="#17b0de"> </td>
<td bgcolor="#49267c" style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; font-size:80px;color:#ffffff;">VISUAL</td>
<td width="55" bgcolor="#17b0de"> </td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="55" height="79" bgcolor="#d9ecf2"> </td>
<td bgcolor="#49267c" style="height:10px;line-height:0px; font-size:0px;"></td>
<td width="55" bgcolor="#d9ecf2"> </td>
</tr>
</table></td>
</tr>
<tr>
<td bgcolor="#d9ecf2" style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; padding:20px 0px; text-align:center; font-size:80px;color:#ffffff;">ROW 2</td>
</tr>
</table>
干杯
答案 1 :(得分:0)
这完全可能,虽然不是超级微不足道的。您可以通过在上面的部分使用背景颜色来构建类似的东西,并在视觉效果的水平位置使用相同的颜色。
<row>
<row><img></row>
<row>