我已经好几年没有创建 HTML 电子邮件了，今天我迫于压力要发布一个 - 以下是我的代码 - 我的问题是当使用 litmus 测试电子邮件时无法扩展 - 它显示为太大了 - 我错过了什么吗？
同样在 Lotus Notes 7 中 - 文本布局被破坏 - 谁能给我任何快速提示!？
我的代码在下面-
<!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" />
<title>Ariston - Merry Christmas</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body bgcolor="#f4f2f2" style="margin:0; padding:0; border:0; width:100%; min-width:600px;" >
<div style="background:#f4f2f2;">
<table border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#f4f2f2" width="100%" >
<tr>
<td >
<br/>
</td>
</tr>
<tr>
<td bgcolor="#f4f2f2">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td>
<img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/emailHead.jpg" width="599" height="413" alt="Merry Christmas from Ariston" />
</td>
<td>
</td>
</tr>
<tr>
<td bgcolor="#ac1022">
<img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/spacer1.gif" width="00" height="30" />
</td>
</tr>
<tr>
<td bgcolor="#ac1022" align="center" style="text-align:center;">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td >
<table border="0" cellpadding="0" cellspacing="0" align="left">
<tr>
<td style="font-family: 'Arial', sans-serif; color:#fff; font-size:18px; font-weight:bold; text-align:center" align="center">
WARM WISHES FROM ALL AT ARISTON.
</td>
</tr>
<tr>
<td>
<img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/spacerRed2.gif" width="24" height="18" />
</td>
</tr>
<tr>
<td style="font-family: 'Arial', sans-serif; color:#a5bbc2; font-size:16px; text-align:center;" align="center">
We’ve loved working with you this year.<br/>
Have a wonderful festive season and a great new year.
</td>
</tr>
<tr>
<td>
<img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/hspace.gif" width="28" height="67" />
</td>
</tr>
<tr>
<td style="text-align:center" align="center"><img src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/AristonRed.jpg" width="164" height="38" alt="Ariston Logo" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="center" style="text-align:center;">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td >
<table border="0" cellpadding="0" cellspacing="0" align="left">
<tr>
<td>
<img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/whiteBlock.gif" width="10" height="10" />
</td>
</tr>
<tr>
<td align="center" style="font-family: 'Arial', sans-serif; color:#ab162b; font-size:12px; text-align:center">
Follow us on:
</td>
</tr>
<tr>
<td align="center" align="center" style="text-align:center;">
<table align="center" style="text-align:center; width:100px;">
<tr >
<td><a href="https://twitter.com/aristonuk"> <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/twitterIco.gif" width="33" height="28" alt="Twitter" /></a></td>
<td><a href="https://www.facebook.com/AristonUK"> <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/fbIco.gif" width="33" height="28" alt="Facebook" /></a></td>
<td> <a href="https://www.youtube.com/user/Aristonthermo"> <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/youIco.gif" width="29" height="28" alt="YouTube" /></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/whiteBlock.gif" width="10" height="10" />
</td>
</tr>
<tr>
<td style="font-family: 'Arial', sans-serif; color:#a5bbc2; font-size:12px; text-align:center;" align="center">
Ariston Thermo UK Ltd
</td>
</tr>
<tr>
<td style="font-family: 'Arial', sans-serif; color:#707170; font-size:12px; text-align:center;" align="center">
Artisan Building, Hillbottom Road, High Wycombe, HP12 4HJ
</td>
</tr>
<tr>
<td>
<img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/whiteBlock.gif" width="10" height="10" alt="white block" />
</td>
</tr>
<tr>
<td>
<img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/whiteBlock.gif" width="10" height="10" alt="white block" />
</td>
</tr>
<tr>
<td align="center">
<a href="http://www.ariston.co.uk" style="color:#ab162b; font-weight:bold; text-decoration:none; font-size:18px; text-align:center;">www.ariston.co.uk</a>
</td>
</tr>
<tr>
<td>
<img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/whiteBlock.gif" width="10" height="10" alt="white block" />
</td>
</tr>
<tr>
<td>
<img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/whiteBlock.gif" width="10" height="10" alt="white block" />
</td>
</tr>
<tr>
<td>
<img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/whiteBlock.gif" width="10" height="10" alt="white block" />
</td>
</tr>
<tr>
<td style="text-align:center" align="center">
<img style="border:none; text-align:center;" align="middle" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/hwater.gif" width="280" height="40" alt="Hot Water, heating and renewables" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
最佳答案
为 Lotus Notes 收件人创建 HTML 邮件是一项挑战。 Notes 不能很好地将 HTML 转换为 Rich Text。
为 body 元素试试这个——设置背景颜色(两次)并移除边距和填充:
<body bgcolor="#f4f2f2" style="background-color:#f4f2f2; margin:0; padding:0;">
对于表格，在 CSS 和旧版 HTML 中准确指定所有内容并没有什么坏处(Notes 仍然使用 <FONT> 标签!!)。
对于表格和图像行:
<table cellpadding="0" cellspacing="0" width="100%"
bgcolor="#f4f2f2" border="0" align="center"
style="border: 0px none; background-color:#f4f2f2">
<tr style="margin: 0;">
<td align="center" width="100%" valign="top">
<table cellpadding="0" cellspacing="0" width="600" bgcolor="#f4f2f2" border="0" align="center" style="border: 0px none;">
<tr style="margin: 0;">
<td width="599" align="center" height="413" valign="bottom" style="text-align: center;">
<img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/emailHead.jpg" width="599" height="413" border="0" alt="Merry Christmas from Ariston" />
</td> ...
请注意，对于 HTML 电子邮件，我没有在 <TD> 之间包含任何回车符标签——一些电子邮件系统会将 CR 读取为一个新行。为了便于查看，我在上方和下方添加了 CR。
对于文本单元格，最好用 <p> 包裹起来元素 - TD 元素的所有内容都应在一行中，但我添加了 CR 以便于查看:
<td>
<p style="font-family: 'Arial', sans-serif; color:#fff; font-size:18px; font-weight:bold; text-align:center"; padding:0; margin:0;">
<b style="font-family: 'Arial Black', sans-serif; text-align:center;">
WARM WISHES FROM ALL AT ARISTON.
</b>
</p>
</td>
为了加粗，我添加了 <b>元素并为其添加字体样式——这是 Notes 的解决方法。 ;-)
不确定您想要缩放什么 - 表格在您的代码(以及我上面的代码)中固定为 600 像素，因此如果您想做一些响应性的事情，您将不得不摆弄它。我不会尝试对一种放之四海而皆准的电子邮件格式过于花哨。 ;-)
关于android - HTML 电子邮件大小调整 - Android，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27444742/