我制作了一个电子邮件模板,它适用于除Microsoft Outlook 2007/2010之外的所有电子邮件服务。
在这里'它应该看起来如何
http://i.stack.imgur.com/Yi1SP.png
以下是它在Outlook上的展示方式
http://i.imgur.com/eRvu3sY.jpg
在这里查看代码本身
<html>
<head>
<title>Robot Coupe</title>
</head>
<body>
<p><%body%></p>
<table border="1" cellpadding="0" cellspacing="0" style="border: 1px solid red;" width="600">
<tbody>
<tr>
<td style="line-height:0px; mso-line-height-rule:exactly;">
<p><span style="font-size:20px;"><span style="font-family:lucida sans unicode,lucida grande,sans-serif;"><strong><a href="http://www.robotcoupe.com.au" title="Robot Coupe"><img src="http://empaustralia.com.au/robot-coupe/logo.jpg" /></a></strong></span></span></p>
<p><span style="font-family:lucida sans unicode,lucida grande,sans-serif;"><strong><a href="http://www.robotcoupe.com.au" title="Robot Cook"><img src="http://empaustralia.com.au/robot-coupe/robot-cook.jpg" /></a></strong></span> <img align="right" height="524px" src="http://empaustralia.com.au/robot-coupe/robot-cook.png" width="266px" /></p>
<p><img src="http://empaustralia.com.au/robot-coupe/bullet.jpg" /><span style="font-family:comic sans ms,cursive;">Emulsify, grind, blend, chop, mix and<br />
knead to perfection.<br />
<br />
<img src="http://empaustralia.com.au/robot-coupe/bullet.jpg" />Hot, cold, sweet or savoury - it’s all up<br />
to you!<br />
<br />
<img src="http://empaustralia.com.au/robot-coupe/bullet.jpg" />High speed and enviable cutting<br />
quality with the ability to heat<br />
up to 140°C<br />
<br />
<img src="http://empaustralia.com.au/robot-coupe/bullet.jpg" />3.7 litre stainless-steel bowl</span></p>
<p><span style="font-family:comic sans ms,cursive;font-size:13px;"> <font color="707070">“I don't see it as a machine, I see it as one of<br />
my chefs, with no days off. It's true, apart<br />
from doing our daily recipes in the machine,<br />
we’re also constantly creating new techniques<br />
and recipes with the Robot Cook. It's so<br />
awesome I’ll bring it to the next staff party, it’s<br />
part of my kitchen team!”</font></span><br />
<a href="http://www.robotcoupe.com.au" title="Robot Coupe"><img align="left" alt="Bernard Chu" src="http://empaustralia.com.au/robot-coupe/Chu.jpg" style="padding:12px 0px 0px 0px" /></a><br />
<span style="font-family:comic sans ms,cursive;font-size:13px;"><font color="#ed1c24"><strong>Bernard Chu</strong><br />
LuxBite (South Yarra) and<br />
T by LuxBite (Melbourne CBD)</font></span></p>
</td>
</tr>
</tbody>
</table>
<table bgcolor="#ed1c24" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td align="center" style="padding:10px 0px 10px 0px"><span style="font-family:comic sans ms,cursive;font-size:13px;"><font color="#ffffff">Call 02 9478 0300 to arrange a FREE demo in your kitchen.</font></span><br />
<a href="mailto:orders@robotcoupe.com.au"><img src="http://empaustralia.com.au/robot-coupe/email.jpg" style="padding: 5px 0px 0px 0px" /></a></td>
</tr>
</tbody>
</table>
</body>
</html>
答案 0 :(得分:1)
代码不是用HTML电子邮件创建的。我快速修复了电子邮件。它绝不是全面的 - 根本没有响应或移动友好。但现在这应该可以起到更好的作用了。在Outlook中为您以及其他电子邮件客户端。
代码和布局仍然存在很多问题 - 我会查看一些设计和开发演练等,并了解HTML电子邮件的格式是否正确。
参见代码:
<html>
<head>
<title>Robot Coupe</title>
</head>
<body>
<p><%body%></p>
<table border="0" cellpadding="0" cellspacing="0" style="border-width:1px; border-style:solid; border-color:red;" width="600">
<tbody>
<tr>
<td style="line-height:0px; mso-line-height-rule:exactly;">
<table align="center" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td align="left"><a href="http://www.robotcoupe.com.au" title="Robot Coupe"><img src="http://empaustralia.com.au/robot-coupe/logo.jpg" /></a></td>
</tr>
<tr>
<td align="left"><a href="http://www.robotcoupe.com.au" title="Robot Cook"><img src="http://empaustralia.com.au/robot-coupe/robot-cook.jpg" /></a></td>
</tr>
</table>
<table align="center" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td align="left">
<table align="center" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td align="left">
<table align="center" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td align="left" valign="top" style="vertical-align:top; padding-top:4px;"><img src="http://empaustralia.com.au/robot-coupe/bullet.jpg" /></td>
<td align="left" style="font-family:comic sans ms,cursive; padding-bottom:10px;">Emulsify, grind, blend, chop, mix and<br />
knead to perfection.</td>
</tr>
<tr>
<td align="left" valign="top" style="vertical-align:top; padding-top:4px;"><img src="http://empaustralia.com.au/robot-coupe/bullet.jpg" /></td>
<td align="left" style="font-family:comic sans ms,cursive; padding-bottom:10px;">Hot, cold, sweet or savoury - it’s all up<br />
to you!</td>
</tr>
<tr>
<td align="left" valign="top" style="vertical-align:top; padding-top:4px;"><img src="http://empaustralia.com.au/robot-coupe/bullet.jpg" /></td>
<td align="left" style="font-family:comic sans ms,cursive; padding-bottom:10px;">High speed and enviable cutting<br />
quality with the ability to heat<br />
up to 140°C</td>
</tr>
<tr>
<td align="left" valign="top" style="vertical-align:top; padding-top:4px;"><img src="http://empaustralia.com.au/robot-coupe/bullet.jpg" /></td>
<td align="left" style="font-family:comic sans ms,cursive; padding-bottom:20px;">3.7 litre stainless-steel bowl</td>
</tr>
</table>
<table align="center" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td align="left" style="font-family:comic sans ms,cursive; font-size:13px;padding-left:9px;"><font color="707070">“I don't see it as a machine, I see it as one of<br />
my chefs, with no days off. It's true, apart<br />
from doing our daily recipes in the machine,<br />
we’re also constantly creating new techniques<br />
and recipes with the Robot Cook. It's so<br />
awesome I’ll bring it to the next staff party, it’s<br />
part of my kitchen team!”</font></td>
</tr>
<tr>
<td align="center">
<table align="center" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td align="left" style="font-family:comic sans ms,cursive; font-size:13px;padding-left:9px; padding-top:10px;">
<a href="http://www.robotcoupe.com.au" title="Robot Coupe"><img align="left" alt="Bernard Chu" src="http://empaustralia.com.au/robot-coupe/Chu.jpg" /></a></td>
<td align="left" style="font-family:comic sans ms,cursive; font-size:13px;padding-left:9px; padding-top:10px;"><font color="#ed1c24"><strong>Bernard Chu</strong><br />
LuxBite (South Yarra) and<br />
T by LuxBite (Melbourne CBD)</font></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td align="right"><img align="right" height="524" src="http://empaustralia.com.au/robot-coupe/robot-cook.png" width="266" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table bgcolor="#ed1c24" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td align="center" style="padding:10px 0px 10px 0px"><span style="font-family:comic sans ms,cursive;font-size:13px;"><font color="#ffffff">Call 02 9478 0300 to arrange a FREE demo in your kitchen.</font></span></td>
</tr>
<tr>
<td align="center" style="padding:0 0px 10px 0px">
<a href="mailto:orders@robotcoupe.com.au"><img src="http://empaustralia.com.au/robot-coupe/email.jpg" style="padding: 5px 0px 0px 0px" /></a></td>
</tr>
</tbody>
</table>
</body>
</html>
答案 1 :(得分:0)
事实是,Outlook使用Word(而不是IE)来呈现电子邮件的HTML标记。您可能会在MSDN中的以下文章中找到所有受支持和不受支持的HTML元素,属性和级联样式表属性: