用于格式化电子邮件的HTML。
我正在制作一个电子邮件模板,它将发送包含填充内容的电子邮件。问题是我无法使布局正常工作并得到电子邮件客户端的支持。 我开始使用 Flex-
我的 HTML 电子邮件模板无法在 Outlook 中正确呈现。 邮箱: Outlook 桌面: 我的 HTML 电子邮件模板未在 Outlook 中正确呈现。Gmail:Outlook 桌面: <table align="center" border="0" cellspacing="0" cellpadding="0" style="width: 90%;border-collapse: collapse;align-content: center;"> <tr> <td style=" background-color: #ececec; display: block;border-bottom: 2px solid #ccc;padding: 5px;text-align: center;vertical-align: middle;"></td> <td id="title" style="background-color: #ececec; display: table-cell;width: 40%; padding: 0px; text-align: center; font-size: 15px; font-weight: bold; vertical-align: middle;">SHOP WITH CONFIDENCE</td> <td style=" background-color: #ececec; display: block;border-bottom: 2px solid #ccc;padding: 5px;"></td> </tr> </table> 如何使其看起来与 Gmail 中的一样? 您需要 2 行表格布局。不幸的是,rowspan 在 Outlook 中不能很好地工作。您仍然可以在表格单元格内添加适当的内容。然后您应该从表格单元格中删除大部分样式。在这些单元格上使用 display: block,然后在它们上重新声明 display: tabel-cell 是没有意义的。直接使用默认即可。 最后但并非最不重要的一点是,您必须使用   将内容添加到表格单元格,否则它们会折叠。 我还将 background-color 从单元格移至表格本身。 <table align="center" border="0" cellspacing="0" cellpadding="0" style="width: 90%;border-collapse: collapse;align-content: center; background-color: #ececec;"> <tr> <td> <table style="width: 100%"> <tr> <td style="border-bottom: 2px solid #ccc;"> </td> </tr> <tr> <td> </td> </tr> </table> </td> <td id="title" style="width: 40%; text-align: center; font-size: 15px; font-weight: bold; vertical-align: middle;">SHOP WITH CONFIDENCE</td> <td> <table style="width: 100%;"> <tr> <td style="border-bottom: 2px solid #ccc;"> </td> </tr> <tr> <td> </td> </tr> </table> </td> </tr> </table>
我正在尝试使用 Gmail html 布局模板。如下面的快照所示,该元素具有自动生成的(我认为)类属性 class="MHCHNe lCsUvc aog TbVst aoN" 这是...
在 HTML 电子邮件中正确嵌入内嵌图像的脚本还将图像添加为附件。如何消除每个图像的第二个副本? # 附加任何图像 图像 = '''/使用...
如何使用 ASP .NET Core 7 发送 HTML 电子邮件
我需要使用 SMTP 和 MailKit 使用 ASP .NET Core 7 发送带有 HTML 标签的电子邮件。我已经发送了带有最少 html 标签的电子邮件,例如 .但我需要发送带有页眉和页脚的内容...
我正在将模板发送到我的 yandex 邮件,一切正常。 但我需要从 yandex 邮件转发此模板。当我单击前进时,模板将移至左侧。 并且还以某种方式删除一些 css 或我...
为什么 Outlook 中的电子邮件模板与 Thunderbird 中的不同
我有一些 php 代码,可以使用 PHPmailer 发送电子邮件。除了按钮之外,这封电子邮件看起来不错。我在 Thunderbird 115.7.0 中测试过它,看起来不错。 在桌面版 Outlook 中...
使用 Mailchimp 在深色背景上强制 Gmail iOS 中的文本颜色
我正在 Mailchimp 中设计一个用于电子邮件的模板。邮件的页脚为深蓝色,带有白色文本。默认情况下,Gmail iOS 应用程序会翻转对比度,因此我们失去了所有漂亮的手写笔...
我按照教程(https://www.youtube.com/watch?v=9VagizlpHNc)制作了可点击的电子邮件签名,但是当我将其放入 gmail 中时,一切都被破坏了。我相信有什么问题......
当您单击电子邮件中的超链接时,我希望打开一个 Excel 文件并运行一个名为“LoadCSV”的子过程。 我已经尝试使用下面的代码。邮件正文包含...
我使用 mjml.io 的在线编辑器创建了一个非常基本的 2 列设计,但我无法使其在移动设备上堆叠。 使用下面的代码,电子邮件在桌面上看起来完全一样(Outlo...
有没有办法让按钮命令发送给 Gmail 或 Outlook 上的人? (已编辑)
所以我从“联系我们”页面想到了这一点。 “按钮命令是否会发送给 Gmail 或 Outlook 上的人员?” 然后,我去了 Stack Overflow,搜索了“如何制作按钮命令
似乎无法使用 css 有效地格式化表格,因为某些选择器被忽略了
我有一个 Power Automate 流程,它使用 Monday.com 和 Microsoft Outlook 生成有关 monday.com 中新记录的表格 我有一个简单的流程,可以触发新记录并向...
Outlook 中圆形按钮的电子邮件 CSS,可控制暗模式颜色
此按钮使用记录完善的 VML 解决方案,可以在 Outlook 中呈现出色的效果,但仅限于轻型模式。在黑暗模式下,我失去了对“填充颜色”的控制,并得到了这个黑色的ove......
调整从 Excel 复制到 Outlook 电子邮件的范围图像的大小
我将 Excel 中的范围复制到 Outlook 电子邮件中。图像太小。 .Width 和.Height 不会改变图像。 将 OutApp2 调暗为对象 将 OutMail2 调暗为对象 Dim table2 作为范围 调暗 ws2 As
我正在尝试创建一个 html 电子邮件模板,该模板在几乎所有客户端(除了 Outlook 桌面)中都可以正常工作。 我尝试了大部分与此相关的线程解决方案,但我无法找到...
是关于这个模块的,我需要将图像显示在中间,而不是顶部 是关于这个模块的,我需要将图像显示在中间,而不是顶部<!-- D2 - BANNER - LIRT --><table align="center" bgcolor="#E4F4F4" cellpadding="0" cellspacing="0" class="container" role="presentation" style="background-color: #E4F4F4 !important;" width="600"> <tr> <td class="padding-lr_20"> <table align="center" border="0" cellpadding="0" cellspacing="0" class="container" width="600"> <tr> <td align="center"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center"> <table align="center" border="0" cellpadding="0" cellspacing="0" class="container h-auto" height="300" width="600"> <tr valign="bottom"> <td align="center"> <!--LEFT--><table align="left" border="0" cellpadding="0" cellspacing="0" class="container" width="300"> <tr> <td align="center" width="100%"> <a alias="Body-Image" conversion="false" data-linkto="https://" href="[link goes here]" style="color: #000000; font-family: sans-serif;text-align: center; text-decoration: none; display: block;"><img alt="[add alt text here]" class="content-image" src="https://dummyimage.com/300x100" style="display: block;width:100%" width="300"> </a></td></tr></table><!--//LEFT--><!--[if gte mso]> </td> <td valign="top"> <![endif]--><!--RIGHT--><table align="right" border="0" cellpadding="0" cellspacing="0" class="container h-auto" height="300" width="300"> <tr valign="middle"> <td align="center" class="padding-tp_20 padding-lr_0" style="padding: 0 32px;" width="265"> <!--[if mso]> <div style="padding-top:20px;"></div> <![endif]--><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center" class="h1 text-center" style="font-family: sans-serif;font-size: 26px;line-height: 30px;color: #000000;font-weight: 700;letter-spacing: -.02em; text-align:left;"> Text Text Text Text Text Text </td></tr><tr> <td align="center" class="body_text text-center" style="font-family: sans-serif;font-size: 16px;line-height: 22px;color: #000000;font-weight: 400; text-align:left;padding-top: 20px;padding-bottom: 20px;"> Text Text Text Text Text Text Text Text Text </td></tr></table></td></tr></table><!--//RIGHT--></td></tr></table></td></tr></table></td></tr></table></td></tr></table><table align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" class="container" role="presentation" style="background-color: #ffffff !important;" width="600"> <tr> <td style="padding-top: 40px;"> </td></tr></table><!-- //D2 - BANNER - LIRT --> 我需要将图像垂直居中。我尝试在 TR 标签上添加 valign="middle",但没有成功。 要通过图像实现您所需要的效果,只需进行一个小修复即可。 <!-- ... [earlier code] ... --> <table align="center" border="0" cellpadding="0" cellspacing="0" class="container h-auto" height="300" width="600"> <tr> <td align="center" valign="middle"> <!-- valign="middle" added here --> <!--LEFT--> <table align="left" border="0" cellpadding="0" cellspacing="0" class="container" width="300"> <tr> <td align="center" valign="middle" width="100%"> <!-- valign="middle" added here --> <a alias="Body-Image" conversion="false" data-linkto="https://" href="[link goes here]" style="color: #000000; font-family: sans-serif;text-align: center; text-decoration: none; display: block;"> <img alt="[add alt text here]" class="content-image" src="https://dummyimage.com/300x100" style="display: block;width:100%" width="300"> </a> </td> </tr> </table> <!--//LEFT--> <!-- [rest of your code] ... --> </td> </tr> </table> <!-- ... [later code] ... --> 如果你想让图像垂直居中,可以使用CSS Flexbox <!-- D2 - BANNER - LIRT --> <table align="center" bgcolor="#E4F4F4" cellpadding="0" cellspacing="0" class="container" role="presentation" style="background-color: #E4F4F4 !important;" width="600"> <tr> <td class="padding-lr_20"> <table align="center" border="0" cellpadding="0" cellspacing="0" class="container" width="600"> <tr> <td align="center"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center"> <table align="center" border="0" cellpadding="0" cellspacing="0" class="container h-auto" height="300" width="600"> <tr valign="bottom"> <td align="center" style="display: flex; align-items: center;"> <!--LEFT--> <table align="left" border="0" cellpadding="0" cellspacing="0" class="container" width="300"> <tr> <td align="center" width="100%"> <a alias="Body-Image" conversion="false" data-linkto="https://" href="[link goes here]" style="color: #000000; font-family: sans-serif;text-align: center; text-decoration: none; display: block;"> <img alt="[add alt text here]" class="content-image" src="https://dummyimage.com/300x100" style="display: block;width:100%" width="300"> </a> </td> </tr> </table> <!--//LEFT--> <!--[if gte mso]> </td> <td valign="top"> <![endif]--> <!--RIGHT--> <table align="right" border="0" cellpadding="0" cellspacing="0" class="container h-auto" height="300" width="300"> <tr valign="middle"> <td align="center" class="padding-tp_20 padding-lr_0" style="padding: 0 32px;" width="265"> <!--[if mso]> <div style="padding-top:20px;"></div> <![endif]--> <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center" class="h1 text-center" style="font-family: sans-serif;font-size: 26px;line-height: 30px;color: #000000;font-weight: 700;letter-spacing: -.02em; text-align:left;"> Text Text Text Text Text Text </td> </tr> <tr> <td align="center" class="body_text text-center" style="font-family: sans-serif;font-size: 16px;line-height: 22px;color: #000000;font-weight: 400; text-align:left;padding-top: 20px;padding-bottom: 20px;"> Text Text Text Text Text Text Text Text Text </td> </tr> </table> </td> </tr> </table> <!--//RIGHT--> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> <table align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" class="container" role="presentation" style="background-color: #ffffff !important;" width="600"> <tr> <td style="padding-top: 40px;"></td> </tr> </table> <!-- //D2 - BANNER - LIRT --> 我添加到您的代码中的是style="display: flex; align-items: center;"到td。 要使用 HTML 获得所需内容,您需要将 valign="middle" (如 andrewbyteforge 指出的那样)和 height="300" 设置为包含图像的 <td>。您的原始 HTML 有 <td align="center" width="100%">,但它需要是 <td align="center" valign="middle" width="100%" height="300">。我希望这有帮助。 <!-- D2 - BANNER - LIRT --><table align="center" bgcolor="#E4F4F4" cellpadding="0" cellspacing="0" class="container" role="presentation" style="background-color: #E4F4F4 !important;" width="600"> <tr> <td class="padding-lr_20"> <table align="center" border="0" cellpadding="0" cellspacing="0" class="container" width="600"> <tr> <td align="center"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center"> <table align="center" border="0" cellpadding="0" cellspacing="0" class="container h-auto" height="300" width="600"> <tr valign="bottom"> <td align="center"> <!--LEFT--><table align="left" border="0" cellpadding="0" cellspacing="0" class="container" width="300"> <tr> <td align="center" valign="middle" width="100%" height="300"> <a alias="Body-Image" conversion="false" data-linkto="https://" href="[link goes here]" style="color: #000000; font-family: sans-serif;text-align: center; text-decoration: none; display: block;"><img alt="[add alt text here]" class="content-image" src="https://dummyimage.com/300x100" style="display: block;width:100%" width="300"> </a></td></tr></table><!--//LEFT--><!--[if gte mso]> </td> <td valign="top"> <![endif]--><!--RIGHT--><table align="right" border="0" cellpadding="0" cellspacing="0" class="container h-auto" height="300" width="300"> <tr valign="middle"> <td align="center" class="padding-tp_20 padding-lr_0" style="padding: 0 32px;" width="265"> <!--[if mso]> <div style="padding-top:20px;"></div> <![endif]--><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center" class="h1 text-center" style="font-family: sans-serif;font-size: 26px;line-height: 30px;color: #000000;font-weight: 700;letter-spacing: -.02em; text-align:left;"> Text Text Text Text Text Text </td></tr><tr> <td align="center" class="body_text text-center" style="font-family: sans-serif;font-size: 16px;line-height: 22px;color: #000000;font-weight: 400; text-align:left;padding-top: 20px;padding-bottom: 20px;"> Text Text Text Text Text Text Text Text Text </td></tr></table></td></tr></table><!--//RIGHT--></td></tr></table></td></tr></table></td></tr></table></td></tr></table><table align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" class="container" role="presentation" style="background-color: #ffffff !important;" width="600"> <tr> <td style="padding-top: 40px;"> </td></tr></table><!-- //D2 - BANNER - LIRT --> 如果不设置高度,就没有“中间”,它会根据其内容(本例中的图像)全部折叠,并且它只是位于其父级的顶部<td>。
使按钮变圆的边框半径在 Outlook 桌面版中不起作用。 这是我在 html 中尝试的代码 使按钮变圆的边框半径在 Outlook 桌面版中不起作用。 这是我在 html 中尝试的代码 <table border="0" cellspacing="0" cellpadding="10" valign="top"> <tr> <td class="outlook-btn" align="center" style="font-size:18px; background-color:#FFFFFF;"> <font face="Arial, sans-serif"> <a href="#" style="padding: 10px 25px; border-radius:5px; color:#df0024; text-decoration:none;">GET STARTED</a> </font> </td> </tr> </table> 展望有条件评论 .outlook-btn{ padding: 10px 25px !important; border-radius: 20px !important; border: 1px solid #000000 !important; } 自 2007 年起,Windows 上的 Outlook 使用 Word 作为渲染引擎。该引擎自 2007 年以来就没有真正更新过,因此它不支持此后出现的任何 HTML 或 CSS。所以它不支持border-radius。 (您可以查看 CanIEmail.com,了解有关 Outlook 和其他电子邮件客户端中 CSS 支持的详细信息:https://www.caniemail.com/features/css-border-radius/)。 在 Windows 上的 Outlook 中获得圆角的常见解决方案是使用 VML。它是一种类似于 SVG 的图像格式。 Campaign Monitor 有一个按钮生成器,该按钮生成器使用 VML for Outlook on Windows:https://buttons.cm/(但请注意,VML 可能会对可访问性产生负面影响,例如使 VML 中的链接对键盘用户不可用。)
为什么 Outlook 会丢失从 SQL 发送的电子邮件的 HTML 格式?
我有一封在 SQL Server Management Studio 中创建的电子邮件,其正文为 HTML。在 HTML 中,我使用 CSS 来更改表中某些行的背景颜色。当我查看 HTML 时,它看起来很好;