我无法在 HTML 电子邮件中使用此 header
I can't get this header working in a HTML email
我正在尝试在 MailChimp 上制作模板,但无法正确设置样式。不过有一些注意事项:CSS 样式必须是 in-line 并且必须被构造为 <table>
标签。
到目前为止,这是我的代码:
<section id="header" style="background-color: #148e97;">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="600" id="emailHeader">
<tr>
<td align="right" valign="">
<div class="socialMediaIcons">
<img src="img/facebook.png"/>
<img src="img/twitter.png"/>
<img src="img/mail.png"/>
<img src="img/linkedin.png"/>
</div>
</td>
</tr>
</table>
<table id="title" width="500">
<tr>
<td align="left" valign="">
<img src="img/logo.png"/>
</td>
<td style="">
<h1 style="text-align: right; "
style="font-family: arial;">Brand USA E-News -- April 2016</h1>
</td>
</tr>
</table>
</td>
</tr>
</table>
</section>
创建 HTML 电子邮件时,您需要将自己带回过去,回到 Internet Explorer 6 很酷的时代。
您不能使用 <section id="header">
或 class="socialMediaIcons"
,因为并非所有电子邮件客户端都支持 <style>
标签。 HTML5 个元素最不受支持,您的 CSS 需要内联并与 style="..."
属性一起使用。电子邮件客户端中有很多 mixed support for CSS,因此您不得不迎合最低公分母。
以下代码为您提供了如何创建布局的起点:
<html>
<body style="margin: 0; padding:0">
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#fff">
<tr>
<td valign="center">
<div style="background-color: #148e97; width:660px; margin:auto;">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="660" bgcolor="#148e97">
<tr>
<td width="30">
<img src="http://placehold.it/1x1" width="30" alt="Spacer">
</td>
<td width="130">
<img src="http://placehold.it/130x115" alt="Logo">
</td>
<td valign="top" width="500">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="500">
<tr>
<td>
<img src="http://placehold.it/1x1" width="1" height="20" alt="Spacer">
</td>
</tr>
<tr>
<td align="right">
<div class="socialMediaIcons">
<img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
<img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
<img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
<img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
</div>
</td>
</tr>
<tr>
<td align="right">
<h1 style="text-align: right; font-family: arial; color: #fff;">Brand USA E-News -- April 2016</h1>
</td>
</tr>
</table>
</td>
<td width="30"><img src="http://placehold.it/1x1" width="30" alt="Spacer"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
您会注意到,在其他 <table>
标签中有很多 <table>
标签,甚至更多 <table>
标签。事情变得一团糟。
我使用了 spacer.gif
的老派技术(使用 http://placehold.it/1x1
代替 1x1.gif 图像),这些天在构建 [=33 时不再需要=]网站.
希望这段代码能让您走上正确的道路。我已经 5 年多没有建立 HTML 电子邮件了,所以我有点生疏了。
我正在尝试在 MailChimp 上制作模板,但无法正确设置样式。不过有一些注意事项:CSS 样式必须是 in-line 并且必须被构造为 <table>
标签。
到目前为止,这是我的代码:
<section id="header" style="background-color: #148e97;">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="600" id="emailHeader">
<tr>
<td align="right" valign="">
<div class="socialMediaIcons">
<img src="img/facebook.png"/>
<img src="img/twitter.png"/>
<img src="img/mail.png"/>
<img src="img/linkedin.png"/>
</div>
</td>
</tr>
</table>
<table id="title" width="500">
<tr>
<td align="left" valign="">
<img src="img/logo.png"/>
</td>
<td style="">
<h1 style="text-align: right; "
style="font-family: arial;">Brand USA E-News -- April 2016</h1>
</td>
</tr>
</table>
</td>
</tr>
</table>
</section>
创建 HTML 电子邮件时,您需要将自己带回过去,回到 Internet Explorer 6 很酷的时代。
您不能使用 <section id="header">
或 class="socialMediaIcons"
,因为并非所有电子邮件客户端都支持 <style>
标签。 HTML5 个元素最不受支持,您的 CSS 需要内联并与 style="..."
属性一起使用。电子邮件客户端中有很多 mixed support for CSS,因此您不得不迎合最低公分母。
以下代码为您提供了如何创建布局的起点:
<html>
<body style="margin: 0; padding:0">
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#fff">
<tr>
<td valign="center">
<div style="background-color: #148e97; width:660px; margin:auto;">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="660" bgcolor="#148e97">
<tr>
<td width="30">
<img src="http://placehold.it/1x1" width="30" alt="Spacer">
</td>
<td width="130">
<img src="http://placehold.it/130x115" alt="Logo">
</td>
<td valign="top" width="500">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="500">
<tr>
<td>
<img src="http://placehold.it/1x1" width="1" height="20" alt="Spacer">
</td>
</tr>
<tr>
<td align="right">
<div class="socialMediaIcons">
<img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
<img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
<img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
<img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
</div>
</td>
</tr>
<tr>
<td align="right">
<h1 style="text-align: right; font-family: arial; color: #fff;">Brand USA E-News -- April 2016</h1>
</td>
</tr>
</table>
</td>
<td width="30"><img src="http://placehold.it/1x1" width="30" alt="Spacer"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
您会注意到,在其他 <table>
标签中有很多 <table>
标签,甚至更多 <table>
标签。事情变得一团糟。
我使用了 spacer.gif
的老派技术(使用 http://placehold.it/1x1
代替 1x1.gif 图像),这些天在构建 [=33 时不再需要=]网站.
希望这段代码能让您走上正确的道路。我已经 5 年多没有建立 HTML 电子邮件了,所以我有点生疏了。