个人中心
gpt4 book ai didi

html - Html NewsLetter 中图像的绝对定位

转载 作者：行者123 更新时间：2023-11-28 18:28:36 26 4
gpt4 key购买 nike

我的 html News letter 有一个主图像，我试图将 5 个图像(图像按钮)放置在主图像顶部的某些位置。如果我用 absolute 定位它们，它在网络浏览器中显示时呈现良好，只要我将 html 页面嵌入电子邮件(outlook)中，图像就会被扔到一边。

对于 html News Letters，实现此目的的最佳方法是什么。

如有任何建议，我们将不胜感激。

最佳答案

@user1475479 您可以使用 VML创建背景图像，然后使用标准表格布局将图像按钮放在顶部，如下面的示例所示。

另一种选择是使用一个大图像并使用 image maps ，但这在电子邮件中是一种不好的做法，因为许多订阅者不会打开图像，在这种情况下，您的电子邮件将是空白的，他们看不到您的按钮。

最好和最常见的解决方案是将大图像分解成较小的图像，然后将其放置在表格中。通过这种方式，您可以为每张图片分配一个 alt 标签，因此如果订阅者不加载图片，它仍然保持其结构，人们仍然知道什么是什么以及点击哪里。注意 - 添加 display:block 非常重要；随时查看您的图片，它们单独位于表格单元格中。

@lukeocom - 您的示例存在一些问题，我没有编辑您的回复，而是在下面重建了它。您的图像都需要有 style="display:block;" 并且最好以像素为单位设置宽度和高度。此外，您需要将所有颜色声明为 6 位十六进制代码，并且在 html 声明中您不需要包含 px(在 css 中只需要)。

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#959595">
<tr>
    <td colspan="3" width="600" bgcolor="#757575">
        <a href=""><img src="yourHeader.png" alt="Header" style="margin: 0; border: 0; padding: 0; display: block;" height="100"  width="600"></a>
    </td>
</tr>
<tr>
    <td width="50" style="vertical-align: top;background-color:#555555;">
        <a href=""><img src="sideBars.png" style="margin: 0; border: 0; padding: 0; display: block;" alt="" height="200" width="50"></a>
    </td>
    <td width="500" valign="top" style="padding:20px;">
      <font style="font-family: Century Gothic, Avant Garde, sans-serif; font-size: 14px; color: #000000;">
        PUT YOUR CONTENT HERE
      </font>
    </td>
    <td width="50" style="vertical-align: top;background-color:#555555;">
        <a href=""><img src="sideBars.png" style="margin: 0; border: 0; padding: 0; display: block;" alt="" height="200" width="50"></a>
    </td>
</tr>
<tr>
    <td colspan="3">
        <a href=""><img src="yourFooter.png" alt="Footer" style="margin: 0; border: 0; padding: 0; display: block;" height="100" width="600"></a>
    </td>
</tr>

如果你想让整个东西居中 float ，把它包起来:

<!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>

我使用 html strict 而不是 xhtml，但工作原理相同但不包括自关闭 img 标签。

关于html - Html NewsLetter 中图像的绝对定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15012597/

26 4 0
文章推荐： javascript - CSS 优先级，当使用 JS 设置样式时
文章推荐： jquery - 无法在可见的溢出内容上使用悬停
文章推荐： ios - 未声明的标识符 FIRAuth
文章推荐： css - Wordpress - 在插件中使用 CSS
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com