我無法在HTML電子郵件中使用此標頭

我試圖在MailChimp上創建模板，但我無法正確設計它。但有一些注意事項：CSS樣式必須在線，並且必須將其結構化爲<table>標籤。我無法在HTML電子郵件中使用此標頭

這裏是我到目前爲止的代碼：

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

來源

2016-05-17 Gabriel Rivera

它爲什麼在表格中？ - 什麼是你的CSS？ – Andrew

@Andrew表格是逼真地設計HTML電子郵件的唯一方式。這和內聯樣式...因此應該沒有CSS樣式表，它應該都是內聯'樣式'標籤 – Martin

對於OP，您可以從代碼中移除任何HTML5語義（'section'），因爲電子郵件HTML是在HTML 3或4.0版本中最好的東西。 – Martin

當創建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老派技術，建設網站時不再需要這些天（代替1x1.gif圖像的使用http://placehold.it/1x1）。

希望這段代碼能夠讓你走上正確的道路。我還沒有建立5年以上的HTML電子郵件，所以我有點生疏。

來源

2016-05-17 13:45:16

好的答案。事情是你沒有建立5年的HTML電子郵件，但在這五年*沒有任何改變的HTML電子郵件*！互聯網的其他部分似乎都在發展，除了電子郵件...... – Martin

非常感謝Kirk，這真的幫助我理解表開始的瘋狂哈哈。 –

@馬丁哈哈，好點！ –

我無法在HTML電子郵件中使用此標頭

回答

相關問題