將在Outlook 2007/2010中正確呈現的HTML

我當前使用以下HTML呈現下面顯示的圖像。然而，這在Outlook中不起作用，因爲不支持背景圖像。我已經傾向於使用表格來正確地在Outlook中呈現元素，但不知道如何去做這件事。 200賞金誰提供了HTML的人將在下面正確地呈現圖像在Outlook 2007/2010"將在Outlook 2007/2010中正確呈現的HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Render this</title> 
    <style type="text/css"> 
     div, p { 
      margin:0; 
      padding:0; 
      font-family: Helvetica; 
      font-size:14px; 
      color:#000; 
      font-weight:bold; 
     } 
     div.box { 
      padding:15px; 
      width:272px; 
      height:155px; 
      border:2px solid #000; 
      background-color:rgb(255,232,0); 
     } 
     div.box div.inner { 
      height:100%; 
      background:url("https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg") bottom right no-repeat; 
     } 
     p.name { 
      margin-bottom:65px; 
     } 
    </style> 
</head> 
<body> 
    <div class="box"> 
     <div class="inner"> 
      <p class="name">John</p> 
      <p>XYZ Company</p> 
     </div> 
    </div> 
</body> 
</html>

enter image description here

來源

2012-04-14 RunLoop

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Render this</title> 
    <style type="text/css"> 
     p { 
      margin:0; 
      padding:0; 
      font-family: Helvetica; 
      font-size:14px; 
      color:#000; 
      font-weight:bold; 
     } 
     table { 
      padding:15px; 
      width:272px; 
      height:155px; 
      border:2px solid #000; 
      background-color: #fee800; 
     } 
     p.name { 
      margin-bottom:65px; 
     } 
    </style> 
</head> 
<body> 
<table> 
<tr><td>John Smith</td><td></td></tr> 
<tr><td><p>XYZ Company</p></td><td><img src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" /></td></tr> 
</table> 

</body> 
</html>

來源

2012-04-14 20:21:56 chadpeppers

是在安全方面就像我在上面的例子一樣，我會用HTML電子郵件表格。這是允許的HTML標記的鏈接電子郵件：http ：//www.campaignmonitor.com/css/ – chadpeppers 2012-04-14 20:23:39

+1表格（從來沒有想過我會這麼說）。可悲的電子郵件客戶端不喜歡div。 – 2012-04-17 20:25:39

我也建議使用內聯CSS。由於webapp有自己的特性，因此html頭部的內容在大多數webmail客戶端中很可能會被忽略。我認爲Mailchimp提供了一個在線解析器，可以將樣式錶轉換爲內聯，因爲使用內聯樣式編寫更長的HTML會很尷尬。 – Halka 2013-03-26 15:16:33

對於電子郵件使用者你應該使用表，不使用CSS在頭部或不同的CSS，儘量使用內聯CSS。

<table bgcolor="#fee800" border="0" cellpadding="0" cellspacing="0" width="272" height="155" style="border: 2px solid #000; padding: 15px;"> 
    <tr> 
     <td><font face="Helvetica, Arial, sans-serif" style="font-size: 14px;"><b>John</b></font></td><td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td><font face="Helvetica, Arial, sans-serif" style="font-size: 14px;"><b>XYZ Company</b></font></td><td><img src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" alt="" /></td> 
    </tr> 
</table>

來源

2012-04-17 07:48:16 Tarun

將在Outlook 2007/2010中正確呈現的HTML

回答

相關問題