我无法在HTML电子邮件中使用此标头

时间:2016-05-17 13:12:46

标签: html css html-email mailchimp

我正在尝试在MailChimp上制作模板,但我无法正确设置样式。但有几点需要注意:CSS样式必须是内联的,并且必须构造为<table>标签。

This is what I have so far

This is the end-goal

到目前为止,这是我的代码:

  <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>

1 个答案:

答案 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电子邮件,所以我有点生气。