1. Demo截图

第1个demo截图

邮件正文javascript 邮件正文的格式_邮件正文javascript

第2个demo截图:

发送给对方后,对方收到的邮件是这样的:

邮件正文javascript 邮件正文的格式_邮件正文javascript_02

 

 

第3个Demo截图

邮件正文javascript 邮件正文的格式_邮件正文javascript_03

 

 

第4个Demo截图

邮件正文javascript 邮件正文的格式_sed_04

 

 

第5个Demo

 

邮件正文javascript 邮件正文的格式_二级_05

 

 

2. 代码

第1个demo代码:

<div>
    <includetail>
        <div style="font:Verdana normal 14px;color:#000;">
            <div style="position:relative;">
                <div class="eml-w eml-w-sys-layout">
                    {{--页眉--}}
                    <div style="font-size: 0px;">
                        {{--分割线--}}
                        <div class="eml-w-sys-line">
                            <div class="eml-w-sys-line-left"></div>
                            <div class="eml-w-sys-line-right"></div>
                        </div>
                        {{--  LOGO --}}
                        <div class="eml-w-sys-logo">
                            <img src="https://rescdn.qqmail.com/node/wwqy/qymng/style/images/sass/independent/welcome_eml_logo.png" style="width: 34px; height: 24px;" onerror="">
                        </div>
                    </div>
                    {{--以下写正文--}}
                    <div class="eml-w-sys-content">
                        {{--以下写正文--}}
                        <div class="dragArea gen-group-list">

                            {{-- 普通的文本  --}}
                            <div class="gen-item">
                                <div class="eml-w-item-block" style="padding: 0px;">
                                    <div class="eml-w-phase-normal-16">你好,张三,你的注册验证码为:</div>
                                </div>
                            </div>

                            {{-- 普通的文本【自定义样式】  --}}
                            <div class="gen-item">
                                {{-- padding:行间距 --}}
                                <div class="eml-w-item-block" style="padding: 10px;">
                                    <div class="eml-w-phase-normal-16" style="color: red;text-align: center;font-weight:bold"> 123456 </div>
                                </div>
                            </div>

                            {{-- 普通的文本【自定义样式】  --}}
                            <div class="gen-item">
                                {{-- padding:行间距 --}}
                                <div class="eml-w-item-block" style="padding: 0px;">
                                    <div class="eml-w-phase-normal-16" style="color: red;text-align: center;font-weight:bold;font-size: 20px"> 123456 </div>
                                </div>
                            </div>

                            {{--  一级标题  --}}
                            <div class="gen-item">
                                <div class="eml-w-item-block" style="padding: 0px;">
                                    <div class="eml-w-title-level1">一、通用功能</div>
                                </div>
                            </div>

                            {{--  二级标题,以及正文--}}
                            <div class="gen-item" draggable="false">
                                <div class="eml-w-item-block" style="padding: 0px 0px 0px 1px;">
                                    {{--  二级标题--}}
                                    <div class="eml-w-title-level3">1. 管理后台 “域名管理” 优化</div>
                                    {{--  二级标题里的小字号正文  --}}
                                    <div>
                                        <div class="eml-w-phase-small-normal">
                                            <p>· 新增“管理记录”,可以查看域名注册、实名审核、续费等记录。</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{--显示图片--}}
                            <div class="gen-item" draggable="false">
                                <div class="eml-w-item-block" style="padding: 0px;">
                                    <div class="eml-w-picture-wrap">
                                        <img src="https://qy-eml-render-1258476243.cos.ap-guangzhou.myqcloud.com/images/sys/202114/pic1%402x.png"
                                             class="eml-w-picture-full-img" style="max-width: 100%;" draggable="false" onerror="">
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    {{--  署名  --}}
                    <div class="eml-w-sys-footer">腾讯企业邮团队</div>
                </div>
                {{--                <img src="//exmail.qq.com/qy_mng_logic/reportKV?type=NewFeatureNotify0731&itemName=NewFeatureNotify0731" style="width:1px;height:1px;display:none;" onerror="">--}}
            </div>
        </div><!--<![endif]-->
    </includetail>
</div>

<style>
    .eml-w .eml-w-phase-normal-16 {
        color: #2b2b2b;
        font-size: 16px;
        line-height: 1.75
    }

    .eml-w .eml-w-phase-bold-16 {
        font-size: 16px;
        color: #2b2b2b;
        font-weight: 500;
        line-height: 1.75
    }

    .eml-w-title-level1 {
        font-size: 20px;
        font-weight: 500;
        padding: 15px 0
    }

    .eml-w-title-level3 {
        font-size: 16px;
        font-weight: 500;
        padding-bottom: 10px
    }

    .eml-w-title-level3.center {
        text-align: center
    }

    .eml-w-phase-small-normal {
        font-size: 14px;
        color: #2b2b2b;
        line-height: 1.75
    }

    .eml-w-picture-wrap {
        padding: 10px 0;
        width: 100%;
        overflow: hidden
    }

    .eml-w-picture-full-img {
        display: block;
        width: auto;
        max-width: 100%;
        margin: 0 auto
    }

    .eml-w-sys-layout {
        background: #fff;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .2);
        border-radius: 4px;
        margin: 50px auto;
        max-width: 700px;
        overflow: hidden
    }

    .eml-w-sys-line-left {
        display: inline-block;
        width: 88%;
        background: #2984ef;
        height: 3px
    }

    .eml-w-sys-line-right {
        display: inline-block;
        width: 11.5%;
        height: 3px;
        background: #8bd5ff;
        margin-left: 1px
    }

    .eml-w-sys-logo {
        text-align: right
    }

    .eml-w-sys-logo img {
        display: inline-block;
        margin: 30px 50px 0 0
    }

    .eml-w-sys-content {
        position: relative;
        padding: 20px 50px 0;
        min-height: 216px;
        word-break: break-all
    }

    .eml-w-sys-footer {
        font-weight: 500;
        font-size: 12px;
        color: #bebebe;
        letter-spacing: .5px;
        padding: 0 0 30px 50px;
        margin-top: 60px
    }

    .eml-w {
        font-family: Helvetica Neue, Arial, PingFang SC, Hiragino Sans GB, STHeiti, Microsoft YaHei, sans-serif;
        -webkit-font-smoothing: antialiased;
        color: #2b2b2b;
        font-size: 14px;
        line-height: 1.75
    }

    .eml-w a {
        text-decoration: none
    }

    .eml-w a, .eml-w a:active {
        color: #186fd5
    }

    .eml-w h1, .eml-w h2, .eml-w h3, .eml-w h4, .eml-w h5, .eml-w h6, .eml-w li, .eml-w p, .eml-w ul {
        margin: 0;
        padding: 0
    }

    .eml-w-item-block {
        margin-bottom: 10px
    }

    @media (max-width: 420px) {
        .eml-w-sys-layout {
            border-radius: none !important;
            box-shadow: none !important;
            margin: 0 !important
        }

        .eml-w-sys-layout .eml-w-sys-line {
            display: none
        }

        .eml-w-sys-layout .eml-w-sys-logo img {
            margin-right: 30px !important
        }

        .eml-w-sys-layout .eml-w-sys-content {
            padding: 0 35px !important
        }

        .eml-w-sys-layout .eml-w-sys-footer {
            padding-left: 30px !important
        }
    }
</style>

第2个demo代码:

<div>
    <includetail>
        <div style="font:Verdana normal 14px;color:#000;">
            <div style="position:relative;">
                {{--  邮件的样式  --}}
                <style>
                    .title_bold {
                        font-family: PingFangSC-Medium, "STHeitiSC-Light", BlinkMacSystemFont, "Helvetica", "lucida Grande", "SCHeiti", "Microsoft YaHei";
                        font-weight: bold;
                    }

                    .mail_bg {
                        background-color: #F5F5F5;
                    }

                    .mail_cnt {
                        padding: 60px 0 160px;
                        max-width: 700px;
                        margin: auto;
                        color: #2b2b2b;
                        -webkit-font-smoothing: antialiased;
                    }

                    .mail_container {
                        background-color: #fff;
                        margin: auto;
                        max-width: 702px;
                        border-radius: 2px;
                    }

                    .eml_content {
                        padding: 0 50px 30px 50px;
                        font-family: "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", sans-serif;
                    }

                    .mail_header {
                        text-align: right;
                    }

                    .top_line_left {
                        width: 88%;
                        height: 3px;
                        background-color: #2984EF;
                        float: left;
                        margin-right: 1px;
                        border-top-left-radius: 2px;
                        display: inline-block;
                    }

                    .top_line_right {
                        width: 12%;
                        height: 3px;
                        background-color: #8BD5FF;
                        float: right;
                        border-top-right-radius: 2px;
                        margin-top: -3px;
                    }

                    .main_title {
                        font-size: 16px;
                        line-height: 24px;
                    }

                    .main_subtitle {
                        line-height: 28px;
                        font-size: 16px;
                        margin-bottom: 12px;
                    }

                    .item_level_1 {
                        margin-top: 60px;
                    }

                    .item_level_2 {
                        margin-top: 40px;
                    }

                    .level_1_title {
                        font-size: 16px;
                        line-height: 28px;
                    }

                    .level_2_title {
                        font-size: 14px;
                        line-height: 28px;
                        font-weight: 600;
                    }

                    .item_txt {
                        font-size: 14px;
                        line-height: 28px;
                    }

                    .mail_footer {
                        font-size: 12px;
                        line-height: 17px;
                        color: #bebebe;
                        margin-top: 60px;
                        letter-spacing: 1px;
                    }

                    .mail_logo {
                        /*这里修改LOGO*/
                        background-image: url("https://exmail.qq.com/zh_CN/htmledition/images/wwbiz_independent/notify_push/logo_2x.png");
                        background-size: 34px 24px;
                        width: 34px;
                        height: 24px;
                        background-repeat: no-repeat;
                        display: inline-block;
                        margin: 27px 0 20px 0;
                        clear: left;
                    }

                    .img_position {
                        max-width: 100%;
                    }

                    .normalTxt {
                        font-size: 14px;
                        line-height: 24px;
                        margin-top: 10px;
                    }

                    @media (max-width: 768px) {
                        .top_line {
                            display: none;
                        }

                        .mail_bg {
                            background: #fff;
                        }

                        .mail_cnt {
                            padding-bottom: 0;
                            padding-top: 0;
                        }

                        .eml_content {
                            padding: 0 12px 50px;
                        }

                        .phoneFontSizeTitle {
                            font-size: 18px !important;
                        }

                        .phoneFontSizeContent {
                            font-size: 16px !important;
                            line-height: 28px !important;
                        }

                        .phoneFontSizeTitleLarge {
                            font-size: 20px !important;
                        }

                        .phoneFontSizeTips {
                            font-size: 14px !important;
                        }
                    }
                </style>

                <div class="qmbox">
                    <div class="mail_bg">
                        <div class="mail_cnt">
                            {{--   邮件正文  --}}
                            <div class="mail_container">
                                {{--  上边的两个分割线  --}}
                                <div class="top_line">
                                    <div class="top_line_left"></div>
                                    <div class="top_line_right"></div>
                                </div>
                                {{--   邮件正文  --}}
                                <div class="eml_content">
                                    {{--   邮件LOGO  --}}
                                    <div class="mail_header">
                                        <div class="mail_logo"></div>
                                    </div>
                                    {{--   邮件内容正文  --}}
                                    <div class="">

                                        {{--   普通正文  --}}
                                        <p style="font-size: 16px;margin-top:20px;" class="phoneFontSizeTitle">
                                            你好,张三
                                        </p>

                                        {{--   带加粗样式  --}}
                                        <p style="font-size: 16px;margin-top:10px;padding-bottom: 20px" class="title_bold phoneFontSizeTitle">
                                            腾讯企业邮新版本已发布,内容如下:
                                        </p>

                                        {{--   一级标题  --}}
                                        <div style="font-size: 20px;color: #2b2b2b;font-weight: bold;line-height: 28px;" class="phoneFontSizeTitleLarge">
                                            一、通用功能
                                        </div>

                                        {{--   二级标题带图  --}}
                                        <div style="margin-bottom: 40px;margin-top: 30px;overflow: hidden;">
                                            <div style="font-size: 16px;line-height: 28px;margin-bottom: 10px;" class="title_bold phoneFontSizeTitle">1. “系统日志-登录查询”优化</div>
                                            <div style="font-size: 14px;line-height: 24px;" class="phoneFontSizeContent">· 支持查询具体管理员的登录记录。</div>
                                            <div style="font-size: 14px;line-height: 24px;" class="phoneFontSizeContent">· 支持超级管理员和分级管理员查询。</div>
                                            <div style="display: inline-block;margin-top: 20px;margin-bottom: 20px;">
                                                <img class="img_position" src="https://rescdn.qqmail.com/node/wwqy/qymng/style/images/sass/independent/newFeature2020120201b_2x.png" onerror="">
                                            </div>
                                        </div>

                                    </div>

                                    {{--   页脚信息  --}}
                                    <div class="mail_footer">
                                        腾讯企业邮团队
                                    </div>
                                </div>
                            </div>
                            {{--   <img src="//exmail.qq.com/qy_mng_logic/reportKV?type=NewFeatureNotify0731&itemName=mail_201203_openCnt" style="width:1px;height:1px;display:none;" onerror="">--}}
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!--<![endif]-->
    </includetail>
</div>

 

第3个demo代码:

<div>
    <includetail>
        <div align="center">
            <div class="open_email" style="margin-left: 8px; margin-top: 8px; margin-bottom: 8px; margin-right: 8px;">
                <div>
                    <br>
                    <span class="genEmailContent">
                        <div id="cTMail-Wrap"
                             style="word-break: break-all;box-sizing:border-box;text-align:center;min-width:320px; max-width:660px; border:1px solid #f6f6f6; background-color:#f7f8fa; margin:auto; padding:20px 0 30px; font-family:'helvetica neue',PingFangSC-Light,arial,'hiragino sans gb','microsoft yahei ui','microsoft yahei',simsun,sans-serif">
                            <div class="main-content" style="">
                                <table style="width:100%;font-weight:300;margin-bottom:10px;border-collapse:collapse">
                                    <tbody>
                                    <tr style="font-weight:300">
                                        <td style="width:3%;max-width:30px;"></td>
                                        <td style="max-width:600px;">
                                            {{--   LOGO  --}}
                                            <div id="cTMail-logo" style="width:92px; height:25px;">
                                                {{--   替换跳转链接  --}}
                                                <a href="">
                                                    {{--   替换LOGO图片  --}}
                                                    <img border="0" src="https://imgcache.qq.com/open_proj/proj_qcloud_v2/mc_2014/cdn/css/img/mail/logo-pc.png"
                                                         style="width:92px; height:25px;display:block">
                                                </a>
                                            </div>
                                            {{--   页面上边的蓝色分割线  --}}
                                            <p style="height:2px;background-color: #00a4ff;border: 0;font-size:0;padding:0;width:100%;margin-top:20px;"></p>

                                            <div id="cTMail-inner" style="background-color:#fff; padding:23px 0 20px;box-shadow: 0px 1px 1px 0px rgba(122, 55, 55, 0.2);text-align:left;">
                                                <table style="width:100%;font-weight:300;margin-bottom:10px;border-collapse:collapse;text-align:left;">
                                                    <tbody>
                                                    {{--   第一个单元格  --}}
                                                    <tr style="font-weight:300">
                                                        {{--   左侧表格,设置左边距用的  --}}
                                                        <td style="width:3.2%;max-width:30px;"></td>
                                                        {{--   中间表格,正文使用  --}}
                                                        <td style="max-width:480px;text-align:left;">
                                                            {{--   以下是正文 --}}
                                                            {{--   可以是标题  --}}
                                                            <h1 id="cTMail-title" style="font-size: 20px; line-height: 36px; margin: 0px 0px 22px;">
                                                                【XX平台】欢迎注册XXXXXX
                                                            </h1>

                                                            <p id="cTMail-userName" style="font-size:14px;color:#333; line-height:24px; margin:0;">
                                                                尊敬的XXX用户,您好!
                                                            </p>

                                                            <p class="cTMail-content" style="line-height: 24px; margin: 6px 0px 0px; overflow-wrap: break-word; word-break: break-all;">
                                                                <span style="color: rgb(51, 51, 51); font-size: 14px;">
                                                                    欢迎注册巴拉巴拉一大堆话。
                                                                </span>
                                                            </p>

                                                            <p class="cTMail-content" style="line-height: 24px; margin: 6px 0px 0px; overflow-wrap: break-word; word-break: break-all;">
                                                                <span style="color: rgb(51, 51, 51); font-size: 14px;">完成注册,请点击下面按钮验证邮箱。
                                                                    <span style="font-weight: bold;">非本人操作可忽略。</span>
                                                                </span>
                                                            </p>

                                                            {{--   按钮  --}}
                                                            <p class="cTMail-content"
                                                               style="font-size: 14px; color: rgb(51, 51, 51); line-height: 24px; margin: 6px 0px 0px; word-wrap: break-word; word-break: break-all;">
                                                                {{--   下面替换成自己的链接  --}}
                                                                <a id="cTMail-btn" href="" title=""
                                                                   style="font-size: 16px; line-height: 45px; display: block; background-color: rgb(0, 164, 255); color: rgb(255, 255, 255); text-align: center; text-decoration: none; margin-top: 20px; border-radius: 3px;">
                                                                    点击此处验证邮箱
                                                                </a>
                                                            </p>

                                                            <p class="cTMail-content" style="line-height: 24px; margin: 6px 0px 0px; overflow-wrap: break-word; word-break: break-all;">
                                                                <span style="color: rgb(51, 51, 51); font-size: 14px;">
                                                                    <br>
                                                                    无法正常显示?请复制以下链接至浏览器打开:
                                                                    <br>
                                                                    <a href="" title=""
                                                                       style="color: rgb(0, 164, 255); text-decoration: none; word-break: break-all; overflow-wrap: normal; font-size: 14px;">
                                                                        这里是激活账号的链接
                                                                    </a>
                                                                </span>
                                                            </p>

                                                            {{--   来个署名  --}}
                                                            <dl style="font-size: 14px; color: rgb(51, 51, 51); line-height: 18px;">
                                                                <dd style="margin: 0px 0px 6px; padding: 0px; font-size: 12px; line-height: 22px;">
                                                                    <p id="cTMail-sender" style="font-size: 14px; line-height: 26px; word-wrap: break-word; word-break: break-all; margin-top: 32px;">
                                                                        此致
                                                                        <br>
                                                                        <strong>XXX团队</strong>
                                                                    </p>
                                                                </dd>
                                                            </dl>
                                                        </td>
                                                        {{--   右侧表格,设置右边距用的  --}}
                                                        <td style="width:3.2%;max-width:30px;"></td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>

                                            {{--   页面底部的推广  --}}
                                            <div id="cTMail-copy" style="text-align:center; font-size:12px; line-height:18px; color:#999">
                                                <table style="width:100%;font-weight:300;margin-bottom:10px;border-collapse:collapse">
                                                    <tbody>
                                                    <tr style="font-weight:300">
                                                        {{--   左,左边距  --}}
                                                        <td style="width:3.2%;max-width:30px;"></td>
                                                        {{--   中,正文  --}}
                                                        <td style="max-width:540px;">

                                                            <p style="text-align:center; margin:20px auto 14px auto;font-size:12px;color:#999;">
                                                                此为系统邮件,请勿回复。
                                                                {{--   可以加个链接  --}}
                                                                <a href=""
                                                                   style="text-decoration:none;word-break:break-all;word-wrap:normal; color: #333;" target="_blank">
                                                                    取消订阅
                                                                </a>
                                                            </p>

                                                            {{--   可以加个图片,公众号二维码之类的  --}}
                                                            <p id="cTMail-rights" style="max-width: 100%; margin:auto;font-size:12px;color:#999;text-align:center;line-height:22px;">
                                                                <img border="0" src="http://imgcache.qq.com/open_proj/proj_qcloud_v2/tools/edm/css/img/wechat-qrcode-2x.jpg"
                                                                     style="width:64px; height:64px; margin:0 auto;">
                                                                <br>
                                                                关注服务号,移动管理云资源
                                                                <br>
                                                                <img src="https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/mail/cr.svg" style="margin-top: 10px;">
                                                            </p>
                                                        </td>
                                                        {{--   右,右边距  --}}
                                                        <td style="width:3.2%;max-width:30px;"></td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </td>
                                        <td style="width:3%;max-width:30px;"></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </span>
{{--                    <br>--}}
                </div>
            </div>
        </div>
    </includetail>
</div>

 

第4个demo代码:

<div>
    <includetail>
        <table style="font-family: Segoe UI, SegoeUIWF, Arial, sans-serif; font-size: 12px; color: #333333; border-spacing: 0px; border-collapse: collapse; padding: 0px; width: 580px; direction: ltr">
            <tbody>
            <tr>
                <td style="font-size: 10px; padding: 0px 0px 7px 0px; text-align: right">
                    张三 现在正在共享您的 Microsoft 365
                </td>
            </tr>
            <tr style="background-color: #0078D4">
                <td style="padding: 0px">
                    <table style="font-family: Segoe UI, SegoeUIWF, Arial, sans-serif; border-spacing: 0px; border-collapse: collapse; width: 100%">
                        <tbody>
                        <tr>
                            <td style="padding: 0px; width: 175px; max-width: 175px">
                                <img src="https://omex.cdn.office.net/images/retailer.images/invite/4aa98a27d0d4978a.png">
                            </td>
                            <td style="padding: 0px; width: 100%">
                            </td>
                            <td style="padding: 0px; width: 107px; max-width: 107px">
                                <img src="https://omex.cdn.office.net/images/retailer.images/invite/fd67eae9865f5f10.png">
                            </td>
                        </tr>
                        <tr>
                            <td style="font-size: 38px; color: #FFFFFF; padding: 12px 22px 4px 22px" colspan="3">
                                已接受邀请
                            </td>
                        </tr>
                        <tr>
                            <td style="font-size: 20px; color: #FFFFFF; padding: 0px 22px 18px 22px" colspan="3">
                                张三 现在正在共享您的 Microsoft 365。
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td style="padding: 30px 20px; border-bottom-style: solid; border-bottom-color: #0078D4; border-bottom-width: 4px">
                    <table style="font-family: Segoe UI, SegoeUIWF, Arial, sans-serif; font-size: 12px; color: #333333; border-spacing: 0px; border-collapse: collapse; width: 100%">
                        <tbody>
                        <tr>
                            <td style="font-size: 12px; padding: 0px 0px 5px 0px">
                                张三 和使用此订阅的所有人将获取:
                                <ul style="font-size: 14px">
                                    <li style="padding-top: 10px">
                                        访问您的可用安装。
                                    </li>
                                    <li>
                                        管理安装的帐户页面。
                                    </li>
                                    <li>
                                        他们专属的 OneDrive 帐户,包含额外 1TB 的存储空间。
                                    </li>
                                </ul>
                            </td>
                        </tr>
                        <tr>
                            <td style="font-size: 12px; padding: 0px 0px 15px 0px">
                                希望邀请更多人? 或删除一些人?
                                <a href="" style="color: #0044CC; text-decoration: none">转到您的帐户页面。</a>
                                您需要首先登录到您的 Microsoft 帐户。
                            </td>
                        </tr>
                        <tr>
                            <td style="font-size: 12px; padding: 0px;">
                                想要了解有关共享订阅的更多信息?
                                <a href="" style="color: #0044CC; text-decoration: none">查看 Office 常见问题。</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td style="padding: 35px 0px; color: #B2B2B2; font-size: 12px">
                    Microsoft Office
                    <br>
                    One Microsoft Way
                    <br>
                    Redmond, WA
                    <br>
                    98052 USA
                </td>
            </tr>
            <tr>
                <td style="padding: 0px 0px 10px 0px; color: #B2B2B2; font-size: 12px">
                    版权所有 Microsoft Corporation
                    <br>
                    <a href="" style="color: #0044CC">隐私声明</a>
                    <br>
                    <a href="" style="color: #0044CC">需要帮助? 请与支持部门联系</a>
                </td>
            </tr>
            </tbody>
        </table>
    </includetail>
</div>

 

第5个demo代码:

<div>
    <includetail>
        <style>
            /* CLIENT-SPECIFIC STYLES */
            body, table, td, a {
                -webkit-text-size-adjust: 100%;
                -ms-text-size-adjust: 100%;
            }

            table, td {
                mso-table-lspace: 0pt;
                mso-table-rspace: 0pt;
            }

            img {
                -ms-interpolation-mode: bicubic;
            }

            .hidden {
                display: none !important;
                visibility: hidden !important;
            }

            /* iOS BLUE LINKS */
            a[x-apple-data-detectors] {
                color: inherit !important;
                text-decoration: none !important;
                font-size: inherit !important;
                font-family: inherit !important;
                font-weight: inherit !important;
                line-height: inherit !important;
            }

            /* ANDROID MARGIN HACK */
            body {
                margin: 0 !important;
            }

            div[style*="margin: 16px 0"] {
                margin: 0 !important;
            }

            @media only screen and (max-width: 639px) {
                body, #body {
                    min-width: 320px !important;
                }

                table.wrapper {
                    width: 100% !important;
                    min-width: 320px !important;
                }
            }
        </style>
        <style>
            body {
                -webkit-text-size-adjust: 100%;
                -ms-text-size-adjust: 100%;
            }

            img {
                -ms-interpolation-mode: bicubic;
            }

            body {
                margin: 0 !important;
            }
        </style>


        <table border="0" cellpadding="0" cellspacing="0" id="body"
               style="text-align: center; min-width: 640px; width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; padding: 0;"
               bgcolor="#fafafa">
            <tbody>
            {{--  最上边紫色的分割线 --}}
            <tr class="line">
                <td style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; height: 4px; font-size: 4px; line-height: 4px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"
                    bgcolor="#6b4fbb"> 
                </td>
            </tr>
            {{--  页头的LOGO    --}}
            <tr class="header">
                <td style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 13px; line-height: 1.6; color: #5c5c5c; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 25px 0;">
                    <img src="http://192.168.10.105/assets/mailers/gitlab_header_logo-153749eaa7ea6fafcb995161abd3247bc4c4500f31498b0c4024f50093983ac0.gif" width="55" height="50"
                         style="-ms-interpolation-mode: bicubic;">
                </td>
            </tr>
            <tr>
                <td style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                    <table border="0" cellpadding="0" cellspacing="0" class="wrapper"
                           style="width: 640px; border-collapse: separate; border-spacing: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0 auto;">
                        <tbody>
                        <tr>
                            <td style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; border-radius: 3px; overflow: hidden; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 18px 25px; border: 1px solid #ededed;"
                                align="left" bgcolor="#ffffff">
                                <table border="0" cellpadding="0" cellspacing="0" class="content"
                                       style="width: 100%; border-collapse: separate; border-spacing: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                                    <tbody>
                                    <tr>
                                        <td style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; color: #333333; font-size: 15px; font-weight: 400; line-height: 1.4; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 15px 5px;"
                                            align="center">
                                            <h1 style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; color: #333333; font-size: 18px; font-weight: 400; line-height: 1.4; margin: 0; padding: 0;"
                                                align="center">
                                                你好,张三!
                                            </h1>
                                            <p>
                                                点击此链接重置密码:
                                            </p>
                                            <div id="cta">
                                                <a href="" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;">点击此处重置链接</a>
                                            </div>
                                            <p>
                                                或复制此链接至浏览器打开:<a href="" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;">http://www.baidu.com</a>
                                            </p>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr class="footer">
                <td style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 13px; line-height: 1.6; color: #5c5c5c; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 25px 0;">
                    <img height="33" src="http://192.168.10.105/assets/mailers/gitlab_footer_logo-078860f148cc9596195e6bb3fa7db31c30538355576c5c3b569c414902e3d095.gif"
                         style="display: block; -ms-interpolation-mode: bicubic; margin: 0 auto 1em;" width="90">

                    <div>
                        您收到这封电子邮件是因为你在 XX平台 拥有帐户。
                        <a style="color: #3777b0; text-decoration: none; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;" href="">
                            管理全部通知
                        </a>
                        ·
                        <a style="color: #3777b0; text-decoration: none; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;" href="http://192.168.10.105/help">
                            帮助
                        </a>
                    </div>
                </td>
            </tr>

            </tbody>
        </table>
    </includetail>
</div>