电子邮件中的正文颜色和按钮bg

时间:2016-10-16 15:32:42

标签: html css email

我一直在使用电子邮件html。

1)是现在按一下按钮并不是Outlook中的全绿色。但是在gmail web中看起来是正确的

2)在Outlook

中未应用560px上的表格/ td的宽度

3)在gmail网络邮件中,浅绿色的车身颜色是由表白色进行的。

4)我试图通过评论在HR上10px上留出余量。但在Outlook中,保证金(顶部)要高得多。

请在发白之前帮忙: - )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<br><br>
<body background="#cbebff" bgcolor="#cbebff" style="background:#cbebff; bgcolor:#cbebff; min-height:1000px; color:#000000;font-family:Arial, Arial, sans-serif; font-size:12px">
<center>
<table border="0" cellpadding="15" cellspacing="0" width="560px">
<tr>
<td colspan="2" width="560px" align="center" valign="top" bgcolor="#3590FF"><img src="http://www.domain.de/images/stories/help_filer/Toplogo.png"></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFFF" background="#FFFFFF"><strong>{hello} {fullname}.</strong></td>
<td valign="top" bgcolor="#FFFFFF" background="#FFFFFF"><div align="right">{order_number_lbl} : {order_number}<br>{order_date_lbl} : {order_date}</div></td>
</tr>
<tr valign="top">
<td colspan="2" width="560px" bgcolor="#FFFFFF" background="#FFFFFF">{payment_missing}
<br><br><br><br>
<a style="width: 250px; padding: 15px; bgcolor:#62c462; background:#62c462; font-weight: bold;  color: #000000; cursor: pointer; border-radius: 8px; border: 1px solid #000000; font-size: 150%;text-decoration:none;" href="https://www.domain.de/index.php?option=com_epay&set_amount={order_total_mail}&set_invoice={order_id}&set_phone={billing_address_start}{phone}{billing_address_end}">{pay_now_lbl}</a>
<br><br><br><br>
<table width="100%" style="padding: 10px;border: 1px solid #CCCCCC;border-radius: 3px;background: #fafafa;">
<tr>
<td><strong>{customer_note_lbl} :</strong><br><hr style="margin: 10px !important;">{customer_note}</td>
</tr>
</table>
<br><br>
</td>
</tr>
</table>
<br>
<table width="560" border="0">
<tr>
<td><div align="center"><font color="#000000"><strong>Print.dk - Berlin</strong></font></div></td>
</tr>
<tr>
<td><hr>
<div align="center"><font color="#000000"><strong>Email : <a href="ronni@print.dk">Info@printdk.de</a> - Web : <a href="www.printdk.de">www.printdk.de</a></strong><a href="www.printdk.de"></a></font></div></td>
</tr>
</table>
</center>
</body>
</html>

图片: https://www.printdk.de/tmp/mail_gmail.jpg

https://www.printdk.de/tmp/mail_outlook.jpg

1 个答案:

答案 0 :(得分:0)

试试这个。

1:

&#13;
&#13;
<p style="width: 150px; padding: 10px; text-align: center; bgcolor:#62c462; background:#62c462; font-weight: bold;  color: #000000; cursor: pointer; border-radius: 8px; border: 1px solid #000000; font-size: 150%;text-decoration:none;"><a  href="your_link">Pay Now</a></p>
&#13;
&#13;
&#13;

2:

&#13;
&#13;
<tr valign="top">
<td colspan="2" width="560px" bgcolor="#FFFFFF" background="#FFFFFF">

<table width="560" style="border-collapse:collapse;" cellpadding="0" cellspacing="0" >
<tr>
<td>Payment Losing</td>
<tr><td>
	<br><br><br><br>
<p style="width: 150px; padding: 10px; text-align: center; bgcolor:#62c462; background:#62c462; font-weight: bold;  color: #000000; cursor: pointer; border-radius: 8px; border: 1px solid #000000; font-size: 150%;text-decoration:none;"><a  href="your_link">Pay Now</a></p>
</td></tr>
</tr>
	
</table>
</td>
</tr>
&#13;
&#13;
&#13;

3:您必须为外表提供宽度以获得浅绿色背景并将所有电子邮件内容放入其中。这样你就可以做到。

4:而不是marginpadding提供给td。有时margin不会被某些电子邮件引擎呈现。

希望这会有所帮助。

您可以在此处参考HTML Email Guidelines