我一直在网上搜索获取信息图表电子邮件模板，以便使用PHP发送电子邮件。我们是否可以具有在电子邮件正文中移动HTML内容的功能，或者像点击事件中的电子邮件正文中的弹出窗口一样。基本上可以显示和隐藏HTML内容。
任何实现此目标的网站或网址都对我进行此项开发非常有帮助。
请参阅下面的示例代码:(但在Gmail中删除了样式:(）
<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!-- This code is part of a tutorial from Email on Acid: https://www.emailonacid.com/blog/article/email-development/build-an-interactive-carousel-for-email -->
<title>Interactive Carousel</title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style type="text/css">
@media only screen and (-webkit-min-device-pixel-ratio: 1), (min--moz-device-pixel-ratio: 1), (max-width: 480px), (max-device-width: 480px) {
.slide1-content,
.slide2-content,
.slide3-content {
display: block;position: absolute;top: 0px;left: 0px;width: 600px;height: 520px;background-color: #FFFFFF;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 1), (min--moz-device-pixel-ratio: 1) {
.slide1-content {left: 0px;}
.slide1:hover { background-color: #37B330;}
#slide-1:checked ~ .slide1 {background-color: #37B330 !important;}
#slide-1:checked + span + table .swoosh { left: 0px !important; }
.slide2 { top: 66px; left: 321px; }
.slide2-content { left: 600px; }
.slide2:hover { background-color: #37B330;}
#slide-2:checked ~ .slide2 {background-color: #37B330 !important;}
#slide-2:checked + span + table .swoosh { left: -600px !important; }
.slide3 { top: 122px; left: 321px; }
.slide3-content { left: 1200px; }
.slide3:hover { background-color: #37B330;}
#slide-3:checked ~ .slide3 {background-color: #37B330 !important;}
#slide-3:checked + span + table .swoosh { left: -1200px !important; }
}
</style>
</head>
<body style="background-color:#6c6c6c;margin: 0px;padding: 0px;" bgcolor="#6c6c6c">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#6c6c6c" style="width: 100% !important; table-layout:fixed;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td valign="top" align="center" style="border-collapse: collapse;">
<div class="wrapper" style="min-width: 640px;">
<table id="CarouselWrapper" width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" class="shrink" style="width:600px; margin:0 auto;mso-table-lspace: 0pt;mso-table-rspace: 0pt;width: 415px !important;height: 895px !important;position: relative;display: block;overflow: hidden;">
<tr>
<td style="border-collapse: collapse;">
<table class="CarouselMain" width="600" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;width: 600px !important;height: 1400px !important;">
<tr>
<td valign="top" style="border-collapse: collapse;">
<table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td style="line-height:1px; font-size:0px;border-collapse: collapse;">
<!--[if mso]><p style="display: none;"><![endif]-->
<form action ="foo">
<input class="yahoo" type="radio" name="action" checked="checked" id="slide-1" style="display: none!important; max-height: 0; visibility: hidden;" />
<span style></span>
<!--[if mso]></p><![endif]-->
<table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td style="line-height:1px; font-size:0px;border-collapse: collapse;">
<!--[if mso]><p style="display: none;"><![endif]-->
<input class="yahoo" type="radio" name="action" id="slide-2" style="display: none!important; max-height: 0; visibility: hidden;" />
<span style></span>
<!--[if mso]></p><![endif]-->
<table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td style="line-height:1px; font-size:0px;border-collapse: collapse;">
<!--[if mso]><p style="display: none;"><![endif]-->
<input class="yahoo" type="radio" name="action" id="slide-3" style="display: none!important; max-height: 0; visibility: hidden;" />
<span style></span>
</form>
<!--[if mso]></p><![endif]-->
<table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td style="border-collapse: collapse;">
<table class="swoosh" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;position: relative;transition: all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;">
<tr>
<td class="slide1-content" style="border-collapse: collapse;display: block;position: absolute;top: 0px;left: 0px;width: 600px;height: 520px;background-color: #FFFFFF">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td valign="top" height="320" style="border-collapse: collapse;">
<img style="border: none !important;" src="https://www.emailonacid.com/images/emails/carousel/image3.jpg" width="320" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10" style="line-height:1px;font-size:1px;display:block;border-collapse: collapse;"> </td>
</tr>
<tr>
<td class="slide2-content" style="border-collapse: collapse;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td valign="top" height="320" style="border-collapse: collapse;">
<img style="border: none !important;" src="https://www.emailonacid.com/images/emails/carousel/image2.jpg" width="320" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10" style="line-height:1px;font-size:1px;display:block;border-collapse: collapse;"> </td>
</tr>
<tr>
<td class="slide3-content" style="border-collapse: collapse;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td valign="top" height="320" style="border-collapse: collapse;">
<img style="border: none !important;" src="https://www.emailonacid.com/images/emails/carousel/image4.jpg" width="320" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10" style="line-height:1px;font-size:1px;display:block;border-collapse: collapse;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<label class="button slide3" for="slide-3" style="display: none; max-height: 0; visibility: hidden; font-size:1px; line-height:1px;visibility: visible !important;max-height: 46px !important;width: 86px !important;padding:7px 0px 6px 0px;display: block !important;position: absolute !important;text-align: center;z-index: 7;background-color: #262626;box-sizing: content-box;color: #ffffff !important;font-family: Arial, Helvetica, sans-serif;font-size: 13px !important;line-height:16px !important;font-weight:bold;cursor:pointer;-webkit-transition: 0.1s ease-in;-moz-transition: 0.1s ease-in;-ms-transition: 0.1s ease-in;-o-transition: 0.1s ease-in;">
<span class="hide" style="color:#ffffff;">Three</span>
</label>
</td>
</tr>
</table>
<label class="button slide2" for="slide-2" style="display: none; max-height: 0; visibility: hidden; font-size:1px; line-height:1px;visibility: visible !important;max-height: 46px !important;width: 86px !important;padding:7px 0px 6px 0px;display: block !important;position: absolute !important;text-align: center;z-index: 7;background-color: #262626;box-sizing: content-box;color: #ffffff !important;font-family: Arial, Helvetica, sans-serif;font-size: 13px !important;line-height:16px !important;font-weight:bold;cursor:pointer;-webkit-transition: 0.1s ease-in;-moz-transition: 0.1s ease-in;-ms-transition: 0.1s ease-in;-o-transition: 0.1s ease-in;">
<span class="hide" style="color:#ffffff;">Two</span>
</label>
</td>
</tr>
</table>
<label class="button slide1" for="slide-1" style="display: none; max-height: 0; visibility: hidden; font-size:1px; line-height:1px;visibility: visible !important;max-height: 46px !important;width: 86px !important;padding:7px 0px 6px 0px;display: block !important;position: absolute !important;text-align: center;z-index: 7;background-color: #262626;box-sizing: content-box;color: #ffffff !important;font-family: Arial, Helvetica, sans-serif;font-size: 13px !important;line-height:16px !important;font-weight:bold;cursor:pointer;-webkit-transition: 0.1s ease-in;-moz-transition: 0.1s ease-in;-ms-transition: 0.1s ease-in;-o-transition: 0.1s ease-in;top: 10px; left: 321px;">
<span class="hide" style="color:#ffffff;">One</span>
</label>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
NB： 是否可以添加动态移动内容，即在电子邮件正文中显示和隐藏div元素。
答案 0 :(得分：0)
由于安全问题，无法为每个邮件发送脚本。许多主要的邮件客户端，就像你在Gmail中注意到的那样，不支持大多数最简单的Html和Css。
Css动画在某些客户端中运行，在其他客户端运行GIF，但脚本在任何客户端都不起作用。也许您可以使用this Recource设计解决方法。 Css动画设计复杂，构建起来非常烦人，但如果客户端支持，可以隐藏元素或移动它们。
此外，您可以使用启动动画的按钮链接到动画所在的网页。但在我的经验中，这给了一个可怕的可用性。
如果您的大多数受众群体都使用Outlook，那么完全不需要使用动画制作内容，因为Outlook不支持任何内容。
希望这有用！