我正在尝试在MailChimp上制作模板,但我无法正确设置样式。但有几点需要注意:CSS样式必须是内联的,并且必须构造为<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>
答案 0 :(得分:2)
创建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图片),这些日子在构建网站<时不再需要/ em>的
希望这段代码能让您走上正确的道路。我还没有构建5年以上的HTML电子邮件,所以我有点生气。