我设计了一封电子邮件,它们在 gmail 和 Outlook Web 中看起来不错,我用 div 和在线样式做了,你知道是时候放置一些特别的东西了吗?还是用微软的outlook软件检查那个邮件?,我用phpmailer发送邮件。
我展示了我如何进行邮件设计的代码:
<?php $route = 'url'; ?>
<body>
<div style="background: #a0d3d7;max-width: 650px;margin:0 auto;">
<div style="margin: 40px 0 0 0;">
<div style="float: right; width: 171px; margin: 33px 36px 0 0;">
<img src="'.$route.'images/mailin/logo.png" alt="logo" style="width: 100%;" />
</div><!-- logo -->
</div><!-- div logo -->
<div style="position: relative;top: -42px;">
<div style="width: 588px; margin: 0 auto;">
<img src="'.$route.'images/mailin/titulo-cum.png" alt="titulo" style="width: 100%;" />
</div><!-- imagen titulo -->
</div><!-- div titulo -->
<div style="color:#002f86;margin-top: -77px;">
<h1 style="text-transform: uppercase;letter-spacing: 0px;text-align: center;">'.$usuario.'</h1>
<p style="margin: 5px auto 0 auto;line-height: 27px;position: relative;font-size: 21px;top: -14px;text-align: center;width: 90%;">
Te deseamos un año lleno de felicidad y nuevas experiencias.
Por eso tenemos un regalo para ti en <b>Experiencias Allianz</b>,
porque no necesitas esperar 364 días para disfrutar
de momentos especiales. <br>
<b>Codigo: </b>'.$codigo.'
</p>
</div><!-- div texto -->
<div style="margin: 16px 0 0 0;">
<a href="'.$route.'" target="_blank">
<div style="width: 183px; margin: 0 auto;">
<img src="'.$route.'images/mailin/boton.png" alt="boton" style="width: 100%;" />
</div><!-- imagen boton -->
</a>
</div><!-- div botton -->
<div style="margin: 0;">
<div style="width: 100%; margin: 0 auto;">
<img src="'.$route.'images/mailin/imagen.jpg" alt="cumpleaños" style="width: 100%;" />
</div><!-- umpleaños -->
</div><!-- div cumpleaños -->
<div style="margin: -4px 0 0 0;">
<div style="width: 100%; margin: 0 auto;">
<img src="'.$route.'images/mailin/footer.png" alt="footer" style="width: 100%;display: block;" />
</div><!-- footer -->
</div><!-- div footer -->
<!--div style="margin: 0;">
<div style="width: 100%; margin: 0 auto;">
<img src="'.$route.'images/mailin/imagen-footer.jpg" alt="footer" style="width: 100%;" />
</div>
</div>< div footer -->
</div><!-- section -->
</body>
gmail 图片
展望网络图像
图像微软前景
当您为群发邮件编写代码时,请使用“古老代码”,即所有内联样式,尽可能手工制作。
在以下链接中,您将找到对兼容 HTML 的引用:https ://templates.mailchimp.com/resources/email-client-css-support/
如果您正在寻找一个 CSS 框架来更好地做到这一点:http: //zurb.com/playground/responsive-email-templates,它会向您显示兼容性表。
正如 fredyfx 告诉你的那样,看看那些链接,它们非常有趣。gmail、outlook、thunderbird 等之间总会有一些差异,但是嘿,你走的越“标准”越好。
看图片的大小,你有宽度:100%,改成图片的大小,因为outlook好像不占用div的大小。还要定义字体和大小以防止它在 Outlook 中跳转,例如:
这是个人问题,但带有表格的邮件带来的问题要少得多......不幸的是,许多用户仍然使用过时的电子邮件客户端......您好!