文章目录

  • 前言
  • 一、开始探索
  • 二、浪子回头
  • 三、注意点
  • 总结


前言

我们也许会发现，我们在生活中收到的邮件，经常不是单纯地文字，往往会非常的丰富精彩，就像一个网页一样，是的，这就叫 Email HTML


一、开始探索

害，工欲善其事必先利其器，从设计那里拿设计图后，当时心想应该很简单，也就普通的html实现就好了，但避免有没有注意的东西，就先谷歌一波，查查看有木有啥要注意的，所以开始我就先查查了email html的实现，这一查就发现不得了~~~

赶紧拜读一波，读后大呼，还好有事先准备，原来考虑到兼容性，Emial HTML在很多邮件客户端上会显示异常。

html5 邮件样式 邮件模板html_html5


需要用到很多的技巧

  • tabel布局
  • Doctype
  • 行内样式等等

这么一看下来，不得了呀，这可真麻烦呀！在继续看了好几篇文章，终于看到想要的，使用工具，人类的智慧在于偷懒呀，这么麻烦的事，谁去干呀，肯定会有人站出来的，结果就有各种当时就选择了一个，轻轻松松的完成了。

html5 邮件样式 邮件模板html_html5_02


最后在一键生成，堪称完美。大体如下编译后的结果：

html5 邮件样式 邮件模板html_客户端_03

二、浪子回头

看看就觉得工具真的伟大，要我写那这样的玩意那可真难受呀，回头自信慢慢的发给导师过眼（还好没有直接发给项目管理的大佬，也没有直接发给后端，不然估计，一个提刀找我，还有个在找刀~~~~），结果导师傻眼了，会被打，会被打，会被打~~~~~~~~

html5 邮件样式 邮件模板html_css_04

哈哈哈哈，回头导师发我了一个，之前同样需求的模板，大呼，妙呀，马上改好，给导师看后，完美通过，再给项目主管，收获一个赞，在给后端，赞加一。会被打，会被打，会被打

内心直呼吓死了~~~下面分享给大家吧，基本完成基本的需求和框架的：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>重置您的 无敌软件的 密码</title>

  <style>
    body,html,div,ul,li,button,p,img,h1,h2,h3,h4,h5,h6 {
      margin: 0;
      padding: 0;
    }

    body,html {
      background: #fff;
      line-height: 1.8;
    }

    h1,h2,h3,h4,h5,h6 {
      line-height: 1.8;
    }

    .email_warp {
      height: 100vh;
      min-height: 500px;
      font-size: 14px;
      color: #212121;
      display: flex;
      /* align-items: center; */
      justify-content: center;
    }

    .logo {
      margin: 3em auto;
      width: 200px;
      height: 60px;
    }

    h1.email-title {
      font-size: 26px;
      font-weight: 500;
      margin-bottom: 15px;
      color: #252525;
    }

    a.links_btn {
      border: 0;
      background: #4C84FF;
      color: #fff;
      width: 100%;
      height: 50px;
      line-height: 50px;
      font-size: 16px;
      margin: 40px auto;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
      border-radius: 4px;
      outline: none;
      cursor: pointer;
      transition: all 0.3s;
      text-align: center;
      display: block;
      text-decoration: none;
    }

    .warm_tips {
      color: #757575;
      background: #f7f7f7;
      padding: 20px;
    }

    .warm_tips .desc {
      margin-bottom: 20px;
    }

    .qr_warp {
      max-width: 140px;
      margin: 20px auto;
    }

    .qr_warp img {
      max-width: 100%;
      max-height: 100%;
    }

    .email-footer {
      margin-top: 2em;
    }

    #reset-password-email {
      max-width: 500px;
    }
    #reset-password-email .accout_email {
      color: #4C84FF;
      display: block;
      margin-bottom: 20px;
    }
  </style>
</head>

<body>
  <section class="email_warp">
    <div id="reset-password-email">
      <div class="logo">
        <img src="" alt="logo">
      </div>

      <h1 class="email-title">
        尊敬的<span>AAA</span>您好：
      </h1>
      <p>您正在为登录邮箱为如下地址的 啦啦啦 账户重置密码：</p>
      <b class="accout_email">xxxx@abc.com</b>

      <p>请注意，如果这不是您本人的操作，请忽略并关闭此邮件。</p>
      <p>如您确认重置 XXXX 的账户密码，请点击下方按钮。</p>

      <a class="links_btn" onclick="window.open('https:XXXXXXXXXXX')">重置密码</a>

      <div class="warm_tips">
        <div class="desc">
          为安全起见，以上按钮为一次性链接，且仅在24小时内有效，请您尽快完成操作。
        </div>

        <p>如有任何疑问或无法完成注册，请通过如下方式与我们联系：</p>
        <p>邮箱：support@XXX.cn</p>
        <p>微信助理：XXXXX</p>

        <div class="qr_warp">
          <img src="https://XXXXXXXXXXXX" alt="微信二维码图片">
        </div>
        <p>本邮件由系统自动发送，请勿回复。</p>
      </div>

      <div class="email-footer">
        <p>您的智能项目助理</p>
        <p>XXXXXXXX</p>
      </div>
    </div>
  </section>
</body>

</html>

如图的效果：

html5 邮件样式 邮件模板html_html5 邮件样式_05


后端只需要把模拟的数据的部分，更改为传递的值的就可以啦！！！其实随着时代的发展，早已今非昔比了，当时还和我导师说，我看的文章就是说要这么写呀，她叫我去看看那篇文章的时间，害，已经五年前的东西了~~~

三、注意点

  • a标签有时候在客户端是不能跳转识别的，还需要加上 target 标签。
  • 在有些邮件客户端中，a标签的 herf 可能会失效，可以改为下面的方式（当时测试说不生效都啥了）
<a class="links_btn" onclick="window.open('{{issueAccessUrl}}')">查看详情</a>
  • 还有个大坑，就是邮件的客户端不支持markdown 的格式的，在一个emial HTML中要加入markdown解析也不大可能。注意了，具体解决方案还没有，大伙看看这效果，惨不忍睹：
  • 还有些 邮件客户端不支持 header样式，只支持 内联样式
  • Gmail不支持flex布局。邮件中的样式尽量写css2的不要用css3

html5 邮件样式 邮件模板html_html5_06

总结

学海无涯~~~