Html新闻稿中图像的绝对定位
我有一个我的html新闻信的主图像，我试图在我的主图像上方的特定位置放置5个图像（图像按钮）。如果我将它们放置在绝对位置，它在web浏览器中显示时会呈现良好效果，一旦我将html页面嵌入电子邮件（outlook），图像就会被抛到一边 对于html新闻信函，实现这一点的最佳方法是什么Html新闻稿中图像的绝对定位,html,css,absolute,newsletter,Html,Css,Absolute,Newsletter,我有一个我的html新闻信的主图像，我试图在我的主图像上方的特定位置放置5个图像（图像按钮）。如果我将它们放置在绝对位置，它在web浏览器中显示时会呈现良好效果，一旦我将html页面嵌入电子邮件（outlook），图像就会被抛到一边 对于html新闻信函，实现这一点的最佳方法是什么 任何建议都将不胜感激。我刚刚花了一周的时间在一封电子邮件上，真是太痛苦了！我发现处理html电子邮件的最佳方法是使用表格布局。有很多标签不适用于电子邮件。每个电子邮件客户端有很多不同的呈现方式。前景是我最讨厌的 如果
任何建议都将不胜感激。我刚刚花了一周的时间在一封电子邮件上，真是太痛苦了！我发现处理html电子邮件的最佳方法是使用表格布局。有很多标签不适用于电子邮件。每个电子邮件客户端有很多不同的呈现方式。前景是我最讨厌的 如果您正在使用的图像上没有任何链接，请使用photoshop创建页眉和页脚横幅，然后使用表格布局显示它们。也使用内联样式，因为有时不支持id或类名。最好是安全的 按行排列的表格布局示例如下：
|header image|
|side bar image(optional) | content (can use another table here) | side bar image|(optional)
|footer image|
<table style="font-size:10pt;background-color: #fff; width:600px;max-width:600px;overflow:hidden; margin: 0px auto; padding: 0px;border-collapse:collapse;border:0;">
<tr>
<td colspan="3" width="600px">
<img src="yourHeader.png" alt="" style="vertical-align:bottom;" height="100%"
width="100%" />
</td>
</tr>
<tr>
<td width="50px" style="vertical-align: top;background-color:#fff;">
<img src="sideBars.png" alt="" height="100%" width="100%" />
</td>
<td width="500px" style="background-color:#fff;padding-left:20px;padding-right:20px;">PUT YOUR CONTENT HERE</td>
<td width="50px" style="vertical-align: top;background-color:#333399;">
<img src="sideBars.png" alt="right image" height="100%" width="100%" />
</td>
</tr>
<tr>
<td colspan="3">
<img src="yourFooter.png" alt="Bottom banner image" style="vertical-align:top;"
height="100%" width="100%" />
</td>
</tr>
</table>
把你的内容放在这里
希望这有帮助。我刚刚花了一周的时间写了一封电子邮件，真是太痛苦了！我发现处理html电子邮件的最佳方法是使用表格布局。有很多标签不适用于电子邮件。每个电子邮件客户端有很多不同的呈现方式。前景是我最讨厌的 如果您正在使用的图像上没有任何链接，请使用photoshop创建页眉和页脚横幅，然后使用表格布局显示它们。也使用内联样式，因为有时不支持id或类名。最好是安全的 按行排列的表格布局示例如下：
|header image|
|side bar image(optional) | content (can use another table here) | side bar image|(optional)
|footer image|
<table style="font-size:10pt;background-color: #fff; width:600px;max-width:600px;overflow:hidden; margin: 0px auto; padding: 0px;border-collapse:collapse;border:0;">
<tr>
<td colspan="3" width="600px">
<img src="yourHeader.png" alt="" style="vertical-align:bottom;" height="100%"
width="100%" />
</td>
</tr>
<tr>
<td width="50px" style="vertical-align: top;background-color:#fff;">
<img src="sideBars.png" alt="" height="100%" width="100%" />
</td>
<td width="500px" style="background-color:#fff;padding-left:20px;padding-right:20px;">PUT YOUR CONTENT HERE</td>
<td width="50px" style="vertical-align: top;background-color:#333399;">
<img src="sideBars.png" alt="right image" height="100%" width="100%" />
</td>
</tr>
<tr>
<td colspan="3">
<img src="yourFooter.png" alt="Bottom banner image" style="vertical-align:top;"
height="100%" width="100%" />
</td>
</tr>
</table>
把你的内容放在这里
style=“display:block；”
把你的内容放在这里
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
<style type="text/css">
/* Client-specific Styles */
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
.ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
table td {border-collapse: collapse;}
</style>
</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding:30px;">
PUT THE ABOVE TABLE IN HERE
</td></tr></table></td></tr></table></body></html>
/*特定于客户端的样式*/
#outlook a{填充：0；}
正文{宽度：100%！重要；-webkit文本大小调整：100%；-ms文本大小调整：100%；边距：0；填充：0；}/*强制默认字体大小*/
.ExternalClass{宽度：100%；}.ExternalClass、.ExternalClass p、.ExternalClass span、.ExternalClass字体、.ExternalClass td、.ExternalClass div{行高：100%；}/*Hotmail*/
#背景表{边距：0；填充：0；宽度：100%！重要；行高：100%！重要；}
表td{边框折叠：折叠；}
把上面的桌子放在这里
style=“display:block；”
把你的内容放在这里
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
<style type="text/css">
/* Client-specific Styles */
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
.ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
table td {border-collapse: collapse;}
</style>
</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding:30px;">
PUT THE ABOVE TABLE IN HERE
</td></tr></table></td></tr></table></body></html>
/*特定于客户端的样式*/
#outlook a{填充：0；}
正文{宽度：100%！重要；-webkit文本大小调整：100%；-ms文本大小