帶邊框和使用電子郵件偏移的樣式按鈕HTML

我有一個電子郵件模板的設計，並且我正在修補有關處理HTML/CSS中以下元素樣式的最佳方法。請注意以下幾點：帶邊框和使用電子郵件偏移的樣式按鈕HTML

由於它是用於HTML電子郵件的，因此主要使用表格。
使用負邊距可能不會與不同的郵件客戶端兼容。
注意周圍的按鈕

你會推薦使用的背景圖像這整個塊白邊？還是有一種優雅的方式，看起來像這樣，可以在客戶中使用。

這裏是我的設置：http://jsfiddle.net/ZHkdV/

enter image description here

來源

2013-06-19 dandoen

您需要包括一個鏈接或一些代碼。 – dmc

剛做過。 http://jsfiddle.net/ZHkdV/ – dandoen

在這裏你去 - 只需要右上角一個30×30的圖像：

<table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#F1F1F1"> 
    <tr> 
    <td width="30" height="30"> 
     <img style="margin: 0; border: 0; padding: 0; display: block;" src="" width="30" height="30" alt=""> 
    </td> 
    <td width="240" height="30">&nbsp; 
    </td> 
    <td width="30" height="30">&nbsp; 
    </td> 
    </tr> 
    <tr> 
    <td width="30" height="160">&nbsp; 
    </td> 
    <td width="240" height="160" valign="top"> 
     <font style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #757575;"> 
     &nbsp;<br> 
     some text here 
     </font> 
    </td> 
    <td width="30" height="160">&nbsp; 
    </td> 
    </tr> 
    <tr> 
    <td width="300" height="40" colspan="3" bgcolor="#FFFFFF"><!-- undeclared light gray as Outlook can add spaces at bottom of this td on forwarding (hides unwanted line) --> 
     <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td width="50" height="20" bgcolor="#F1F1F1">&nbsp; 
      </td> 
      <a href="" style="color: #757575; font-weight: bold; text-decoration: none;"><!-- css button, you can lose this and put a href'd image in the cell if you prefer. --> 
      <td width="200" height="40" bgcolor="#CBBCDC" rowspan="2" valign="middle" align="center"> 
      <font style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #757575;"> 
      BUTTON 
      </font> 
      </td> 
      </a> 

      <td width="50" height="20" bgcolor="#F1F1F1">&nbsp; 
      </td> 
     </tr> 
     <tr> 
      <td width="50" height="20" bgcolor="FFFFFF">&nbsp; 
      </td> 
      <td width="50" height="20" bgcolor="FFFFFF">&nbsp; 
      </td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
</table>

這應會在所有客戶端...

來源

2013-06-19 17:34:24 John

你能解釋一下「Outlook可以在轉發時在這個td的底部添加空格嗎」嗎？謝謝。 – Alysko

@Alysko Outlook在轉發電子郵件時在表格周圍嵌入了

'。如果用戶將電子郵件從Outlook轉發到Gmail（或者任何不能使用樣式標籤將客戶端設置爲零的客戶端），它會在表格和圖片下方創建一個不需要的底部邊距約20px [（相關鏈接） ]（http://commadot.com/gmail-and-p-msonormal/）。通過設置這個白色，我隱藏了一個醜陋的淺灰色線條出現在這個場景下的按鈕下。 – John

背景圖片不是很兼容兩種：

http://www.campaignmonitor.com/css/

我只想片的最後一排爲3個獨立的圖像（左，按鈕，右）。

如果您希望整行有一個圖像，還可以使用圖像映射將按鈕部分變爲鏈接。

來源

2013-06-19 14:00:13 LouD

對於電子郵件模板，您不必擔心驗證，因此您可以使用漂亮的'hacky'html。客戶端兼容性的一種方法是讓每一行都是一個表，並將其設置在一個主包裝表中。

然後，您可以在每個分區中設置任意多個分區，記住要重置每個表格，行和單元格上的邊框。

每個單元格獲取它自己的圖像或圖像的切片。對於最後一行，您可以在錨標記中簡單地顯示一個圖像。另外請記住保持內聯元素的所有樣式。

html電子郵件Boilerplate幾乎是防彈的。

http://htmlemailboilerplate.com/

<table> <!- Wrapper -> 
    <tr> 
    <td> 
    <table> 
    <tr> 
    <td> 
    </td> 
    </tr> 
    </table> 
    </td> 
    </tr> 

</table>

來源

2013-06-19 14:28:41 dmc

帶邊框和使用電子郵件偏移的樣式按鈕HTML

回答

相關問題