兼容outlook的邮件HTML

102 阅读2分钟

“开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天,点击查看活动详情

公司最近要求做一个邮件,我当时做好了以后,信心满满,发给领导,结果发现outlook电脑版的客户端不兼容,样式都串了,因为电脑版的outlook客户端div布局,flex布局,还有margin居然都不起作用,只能用table来进行布局,踩了很多坑,以下是做好的一个版本,可以给大家作为参考

<!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”>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
    <title>邮件通知</title>
    <style>
        body,html,div,ul,li,button,p,img,h1,h2,h3,h4,h5,h6 {
          margin: 0;
          padding: 0;
        }
        table {border-collapse:collapse;border-spacing:0;margin:0;}
        div{padding:0;}
        body,html {
          background: #fff;
          line-height: 1.8;
        }
    
        h1,h2,h3,h4,h5,h6 {
          line-height: 1.8;
        }
    
        .email_warp {
          height: 100vh;
          width:1250px;
          min-height: 500px;
          font-size: 14px;
          color: #212121;
          display: flex;
          justify-content: center;
        }
    
        .logo {
          margin: 3em auto;
        }
    
        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;
        }
        .accout_email {
          color: #4C84FF;
          margin-bottom: 20px;
        }
        .flex{
            display: flex;
            align-items: center;
        }
        .footer{
            background: #3e3e3e;
            color: #fff;
            width: 1251px;
        }
        .icon{
            width: 30px;
            height: 30px;
            margin-right: 10px;
        }
        .code{
            width: 150px;
            height: 150px;
        }
        .tip{
            margin-bottom: 10px;
            
        }
        .green{
          color: #1db300;
        }
        .red{
          color:  #ff0404;
        }
        .orange{
          color: #ff8400;
        }
        .blue {
          color: #0090d3;
        }
        p{
          font-size: 18px;
        }
        .right{
          text-align: right;
          margin-right: 30px;
        }
        .link{
          padding-bottom: 30px;
          margin-top: -30px;
        }
        .fz22{
          font-size: 22px;
          text-decoration: underline;
        }
        .table{
          margin: 0 70px;
        }
      </style>
</head>
<body style="margin:0 auto;padding:0;width:1250px">
    <section class="email_warp">
        <div id="reset-password-email">
          <div class="logo">
            <img src="1.png" alt="logo">
          </div>
          <h2 class="email-title">
            尊敬的用户<span class="blue">AAA</span>您好:
          </h2>
          <p>&nbsp;&nbsp;&nbsp;&nbsp;您管辖区域下, 已新增这些离线设备, 详细信息如下:</p>
          <br>
          <table class="table" border="1" cellpadding="10" cellspacing="0" >
            <tr>
                <th>设备名称</th>
                <th>所属机构</th>
                <th>所属教室</th>
                <th>设备SN</th>
                <th>离线时间</th>
            </tr>
            <tr>
              <td >1233</td>
              <td >1111</td>
              <td >1111</td>
              <td >33333</td>
              <td >2000-01-01 00:00:00</td>
            </tr>
            <tr>
              <td >33333</td>
              <td >44444</td>
              <td >65555</td>
              <td >77777</td>
              <td >2000-01-01 00:00:00</td>
            </tr>
            <tr>
              <td >3434434</td>
              <td >546554654</td>
              <td >656565</td>
              <td >5757676</td>
              <td >2000-01-01 00:00:00</td>
            </tr>
          </table>
        <br>
        <p class="blue">&nbsp;&nbsp;&nbsp;&nbsp;如有需要,请及时联系相关人员进行处理</p>
        <br><br>
        <p>截至目前,您的账号下共有设备 <span class="orange fz22">X</span> 台,当前时段应在线 <span class="blue fz22">X</span> 台,实际在线 <span class="green fz22">X</span> 台,已离线 <span class="red fz22">X</span></p>
        <br>
        <p>离线设备无法管理,请您检查离线相关设备,并使其保持在线,以便正常管理和使用,谢谢!</p>
        <table style="width: 1250px;" border="0" cellpadding="30" cellspacing="0" >
          <tr>
            <th align="right" class="red">此邮件为系统邮件,请不要直接回复</th>
          </tr>
        </table>
        <div style="vertical-align:middle;">
          <img  border="0" style="border:none;display: block;" src=55.png" alt="logo">
          <table class="footer" border="0" cellpadding="30" cellspacing="10" >
            <tr>
                <th><img class="code" width="150" height="150" src="code.png" alt=""></th>
                <th align="left">
                  <table style="color: #fff;" border="0" cellpadding="0" cellspacing="0" >
                    <tr>
                      <th><img class="icon" width="30" height="30" src="44.png" alt=""></th>
                      <th align="left"><span style="margin-bottom: 10px;">&nbsp;公司地址: 地址在这里哦</span></th>
                    </tr>
                    <tr>
                      <th><img class="icon" width="30" height="30" src="33.png" alt=""></th>
                      <th align="left"><span style="margin-bottom: 10px;">&nbsp;客服热线: 电话在这里啦</span></th>
                    </tr>
                    <tr>
                      <th><img class="icon" width="30" height="30" src="22.png" alt=""></th>
                      <th align="left"><span style="margin-bottom: 10px;">&nbsp;公司邮箱: 邮箱要填哦</span></th>
                    </tr>
                    <tr>
                      <th></th>
                      <th></th>
                    </tr>
                  </table>
                  <th align="right"><a class="blue" href="链接地址在这里">前往管理平台 >></a></th>
            </tr>
          </table>
        </div>
    </section>
</body>
</html>  

PS: 因为涉及到公司,所以里面有关公司的信息,我都替换掉了,比如图片资源啊,跳转链接等,参考的小伙伴自己注意下哦

以下是具体的页面展示:

e1bcdc3afb400afd69c3d52034417a5.png

PS:以上就是兼容outlook的邮件HTML,我的举例只是最简单的一个demo,大家根据自己的需求自行修改即可,具体内容我也是用最通俗易懂的方式来讲解了,有不清楚的,可以评论,大家一起讨论讨论。

最后,祝大家发大财~