我还没有在驴年创建HTML电子邮件，而且我今天要承受一个HTML电子邮件 - 以下是我的代码 - 我的问题是当使用石蕊测试电子邮件时无法扩展 - 它的节目太大了 - 我错过了什么吗？
同样在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>
答案 0 :(得分：1)
为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像素（以及我的上面），所以如果你想做一些响应式的东西，你将不得不摆弄它。对于一种适合所有人的电子邮件格式，我不会尝试太过花哨。 ; - ）
答案 1 :(得分：0)
尝试将其放入<head>标记
<meta name="HandheldFriendly" content="true" />