发送邮件模板-支持outlook版

工作过程中,偶尔会遇到需要发送邮件的功能,但是对于一些大公司而言,通常使用的是 outlook ,所以在写邮件模板时,就会是个很头疼的问题,对于写过的同学而言,也还好,嵌套格式即可,对于没有写过的同学,outlook 兼容性是个非常头疼的问题。

布局方面,平时用的各种炫酷布局,皆不支持。

css 方面,也只能用最原始的 css 来写,css3 就不用说了,position 都会有问题,甚至于不能在 中写样式,只能内联。

所以,写模板,只能回归最原始的方式,越简单越好。

当然,写过一次后,就简单了,嵌套即可。

以下是一个 html 模板
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>outlook模板</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    body {
        padding: 20px 20px 20px;
        box-sizing: border-box;
    }
</style>
<body>
    <table id="bill_report" width="100%" cellpadding="0" cellspacing="0" style="border: none;"><tr><td>
        <!-- start -->
        <!-- 标题 -->
        <table cellpadding="20" cellspacing="0" width="100%" align="left" style="border: none;">
            <tr>
                <td align="left">
                    <h3 style="font-size: 16px;">
                        XXXXX 
                        <em style="font-style: normal;font-size: 12px;color: #999;margin-left: 20px;font-weight: normal;">
                            日期:2023.08.06
                        </em>
                    </h3>
                    <p style="color: #333;font-size: 12px;margin: 10px 0;">
                        XXX,您好!请查看!
                    </p>
                </td>
                <td align="right">
                    <img class="logo" style="width: 45.62px;height: 50px;display: inline-block;" src="https://gd-hbimg.huaban.com/09d28d68d5b8842a21173b637d79cccd89b62120ab3-mJz5h5_fw1200webp" alt="">
                </td>
            </tr>
        </table>
        <!-- 显示版 -->
        <table id="dashboard_view" cellpadding="20" cellspacing="0" width="100%" align="left" style="width: 100%;height: auto;padding: 20px;margin-top: 10px;border-radius: 3px;border: 2px solid #005ACF;box-shadow: 0 4px 10px 0 #aec8e0;box-sizing: border-box;background-color: #eaf1fb;">
            <tr><td>
                <table cellpadding="20" cellspacing="0" width="100%" align="left" style="border: none;">
                    <tr>
                        <td align="left" style="vertical-align: top;">
                            <h3 style="font-size: 16px;color: #333;line-height: 16px;margin-top: 10px;">
                                6XXXXX <span style="font-size: 12px;color: #333;">/结余</span>
                            </h3>
                            <h5 class="total" style="font-size: 30px;line-height: 24px;color: #005ACF;font-weight: 600;margin-left: -5px;padding-top: 20px;padding-bottom: 40px;box-sizing: border-box;">157,052.00 <span style="font-size: 20px;color: #333;">/¥ 107,052,000</span>
                            </h5>
                        </td>
                        <td align="right">
                            <img class="logo" style="width: 100px;height: 103.64px;display: inline-block;margin-right: 20px;" src="https://gd-hbimg.huaban.com/09d28d68d5b8842a21173b637d79cccd89b62120ab3-mJz5h5_fw1200webp" alt="">
                        </td>
                    </tr>
                </table>
            </td></tr>
            <!-- 白色卡片区域 -->
            <tr><td>
                <table id="view_table" cellpadding="20" cellspacing="0" width="100%" align="center" style="border: none;margin-bottom: 30px;">
                    <tr>
                        <th width="25%" style="background-color: #fff;height: 134px;padding: 24px;box-sizing: border-box;font-size: 14px;text-align: left;border-right: 16px solid #eaf1fb;color: #999;vertical-align: top;box-shadow: -16px 6px 12px 0 #222a8d1a;">
                            <span style="font-weight: 500;">XXXXX </span>
                            <h3 style="color: #1C77FF;font-size: 28px;margin-top: 12px;line-height: 40px;">¥ 126,560</h3>
                        </th>
                        <th width="25%" style="background-color: #fff;height: 134px;padding: 24px;box-sizing: border-box;font-size: 14px;text-align: left;border-right: 16px solid #eaf1fb;color: #999;vertical-align: top;box-shadow: -16px 6px 12px 0 #222a8d1a;">
                            <span style="font-weight: 500;">XXXXX </span>
                            <h3 style="color: #1C77FF;font-size: 28px;margin-top: 12px;line-height: 40px;">¥ 126,560</h3>
                        </th>
                        <th width="25%" style="background-color: #fff;height: 134px;padding: 24px;box-sizing: border-box;font-size: 14px;text-align: left;border-right: 16px solid #eaf1fb;color: #999;vertical-align: top;box-shadow: -16px 6px 12px 0 #222a8d1a;">
                            <span style="font-weight: 500;">XXXXX </span>
                            <h3 style="color: #1C77FF;font-size: 28px;margin-top: 12px;line-height: 40px;">¥ 126,560</h3>
                        </th>
                        <th width="25%" style="background-color: #fff;height: 134px;padding: 24px;box-sizing: border-box;font-size: 14px;text-align: left;border: none;color: #999;vertical-align: top;box-shadow: -16px 6px 12px 0 #222a8d1a;">
                            <span style="font-weight: 500;">XXXXX </span>
                            <div style="width: 100%;overflow: hidden;">
                                <div  style="width: 50%;float: left;">
                                    <h3 style="color: #1C77FF;font-size: 28px;margin-top: 12px;line-height: 40px;">¥ 6,560</h3>
                                    <span style="color: #666666;margin-top: 5px;font-weight: 500;">4</span>
                                </div>
                                <div  style="width: 50%;float: left;">
                                    <h3 style="color: #1C77FF;font-size: 28px;margin-top: 12px;line-height: 40px;">¥ 6,560</h3>
                                    <span style="color: #666666;margin-top: 5px;font-weight: 500;">5</span>
                                </div>
                            </div>
                        </th>
                    </tr>
                </table>
            </td></tr>
            <!-- table 区域 -->
            <tr><td>
                <table id="view_table" cellpadding="20" cellspacing="0" width="100%" align="center" style="border: none;">
                    <tr>
                        <th width="12%" style="background-color: #5C99F4;height: 80px;padding: 8px;box-sizing: border-box;font-size: 12px;text-align: center;border: 2px solid #F0F9FF;color: #fff;vertical-align: middle;">
                            XXXXX 
                        </th>
                        <th width="22%" style="background-color: #5C99F4;height: 80px;padding: 8px;box-sizing: border-box;font-size: 12px;text-align: center;border: 2px solid #F0F9FF;color: #fff;vertical-align: middle;">
                            XXXXX 
                        </th>
                        <th width="16%" style="background-color: #5C99F4;height: 80px;padding: 8px;box-sizing: border-box;font-size: 12px;text-align: center;border: 2px solid #F0F9FF;color: #fff;vertical-align: middle;">
                            XXXXX 
                        </th>
                        <th width="16%" style="background-color: #5C99F4;height: 80px;padding: 8px;box-sizing: border-box;font-size: 12px;text-align: center;border: 2px solid #F0F9FF;color: #fff;vertical-align: middle;">
                            XXXXX 
                        </th>
                        <th width="22%" style="background-color: #5C99F4;height: 80px;padding: 8px;box-sizing: border-box;font-size: 12px;text-align: center;border: 2px solid #F0F9FF;color: #fff;vertical-align: middle;">
                            XXXXX 
                        </th>
                        <th width="12%" style="background-color: #F5C01C;height: 80px;padding: 8px;box-sizing: border-box;font-size: 12px;text-align: center;border: 2px solid #F0F9FF;color: #fff;vertical-align: middle;">
                            XXXXX 
                        </th>
                    </tr>
                    <tr>
                        <td style="background-color: #fff;padding: 8px;box-sizing: border-box;font-size: 12px;text-align: center;border: 2px solid #F0F9FF;color: #666;vertical-align: middle;text-align: center;font-weight: normal;">
                            XXXXX 
                        </td>
                        <td style="background-color: #fff;padding: 8px;box-sizing: border-box;font-size: 12px;text-align: center;border: 2px solid #F0F9FF;color: #666;vertical-align: middle;text-align: right;font-weight: normal;">
                            ¥ 114,663
                        </td>
                        <td style="background-color: #fff;padding: 8px;box-sizing: border-box;font-size: 12px;text-align: center;border: 2px solid #F0F9FF;color: #666;vertical-align: middle;text-align: right;font-weight: normal;">
                            ¥ 2,379
                        </td>
                        <td style="background-color: #fff;padding: 8px;box-sizing: border-box;font-size: 12px;text-align: center;border: 2px solid #F0F9FF;color: #666;vertical-align: middle;text-align: right;font-weight: normal;">
                            ¥ 2,379
                        </td>
                        <td style="background-color: #fff;padding: 8px;box-sizing: border-box;font-size: 12px;text-align: center;border: 2px solid #F0F9FF;color: #666;vertical-align: middle;text-align: right;font-weight: normal;">
                            ¥ 2,379
                        </td>
                        <td style="background-color: #fff;padding: 8px;box-sizing: border-box;font-size: 12px;text-align: center;border: 2px solid #F0F9FF;color: #005ACF;vertical-align: middle;text-align: right;font-weight: normal;">
                            ¥ 2,379
                        </td>
                    </tr>
                </table>
            </td></tr>
            <tr><td>
                <p class="tips" style="font-size: 12px;color: #999;font-weight: 400;padding-top: 20px;padding-bottom: 20px;box-sizing: border-box;">
                    <i style="color: #ff0000;margin-right: 5px;">*</i>提醒:如有疑议,请在15号之前提出。Contact:<a href="#" style="color: #005ACF;">www.baidu.com</a>
                </p>
            </td></tr>
        </table>
        <!-- 附件标题 -->
        <table cellpadding="20" cellspacing="0" width="100%" align="left" style="border: none;">
            <tr><td>
                <p class="sub_title" style="font-size: 16px;color: #333;font-weight: bold;box-sizing: border-box;padding-top: 50px;padding-bottom: 10px;padding-left: 10px;">
                    附:XXXXX 
                </p>
            </td></tr>
        </table>

        <div class="deep_table_group">
            <!-- 附件table,下钻table -->
            <table class="app_report deep_table" cellpadding="20" cellspacing="0" width="100%" align="left" style="border: 1px solid #CCCCCC;border-bottom: none;">
                <!-- 表头 - 无需循环 -->
                <tr class="app_header">
                    <th width="50%" align="left" style="padding-left: 30px;min-height: 30px;font-weight: 500;padding: 5px 10px 5px 20px;box-sizing: border-box;border-bottom: 1px solid #CCCCCC;font-size: 14px;">
                    XXXXX 
                    </th>
                    <th width="50%" align="right" style="padding-left: 30px;min-height: 30px;font-weight: 500;padding: 5px 10px 5px 20px;box-sizing: border-box;border-bottom: 1px solid #CCCCCC;font-size: 14px;">XXXXX</th>
                </tr>
            </table>
            <!-- ------------------- 循环 开始 ------------------- -->
            <div class="app_loop_group" style="width: 100%;height: auto;overflow: hidden;">

                <!-- 第一行内容 - 可循环 - 下钻层级 一 -->
                <table class="app_loop deep_table" cellpadding="20" cellspacing="0" width="100%" align="left" style="border: 1px solid #CCCCCC;border-bottom: none;border-top: none;">
                    <!-- name + amount -->
                    <tr class="app_row">
                        <td width="50%" align="left" style="padding-left: 10px;min-height: 30px;font-weight: normal;padding: 5px 10px;box-sizing: border-box;border-bottom: 1px solid #CCCCCC;font-size: 14px;">
                            <div class="name_process" style="width: 100%;height: auto;display: box;display: -webkit-box;display: -moz-box;display: -ms-box;display: -o-box;box-align: center;-webkit-box-align: center;-moz-box-align: center;-ms-box-align: center;-o-box-align: center;">
                                <i class="icon_minus" style="display: inline-block;width: 14px;height: 14px;border: 1px solid #CCCCCC;background-color: #fff;box-sizing: border-box;line-height: 12px;text-align: center;margin-right: 2px;padding-right: 3px;">-</i>
                                <span class="app_name common_blue" style="font-weight: 500;color: #005ACF;">
                                    XXXXX 
                                </span>
                            </div>
                        </td>
                        <td width="50%" align="right" style="padding-left: 30px;min-height: 30px;font-weight: normal;padding: 5px 10px;box-sizing: border-box;border-bottom: 1px solid #CCCCCC;font-size: 14px;">
                            <span class="app_amount common_blue" style="font-weight: 500;color: #005ACF;">¥ 2,379</span>
                        </td>
                    </tr>
                </table>

                <!-- ------------------- 循环 开始 ------------------- -->
                <div class="cloudroom_loop_group" style="width: 100%;height: auto;overflow: hidden;">

                    <!-- 下钻层级 二 -->
                    <table class="cloudroom_loop deep_table" cellpadding="20" cellspacing="0" width="100%" align="left" style="border: 1px solid #CCCCCC;border-bottom: none;border-top: none;">
                        <tr>
                            <td width="50%" align="left" style="min-height: 30px;font-weight: normal;padding: 5px 10px 5px 30px;box-sizing: border-box;border-bottom: 1px solid #CCCCCC;font-size: 14px;">
                                <div class="name_process" style="width: 100%;height: auto;display: box;display: -webkit-box;display: -moz-box;display: -ms-box;display: -o-box;box-align: center;-webkit-box-align: center;-moz-box-align: center;-ms-box-align: center;-o-box-align: center;">
                                    <i class="icon_minus" style="display: inline-block;width: 14px;height: 14px;border: 1px solid #CCCCCC;background-color: #fff;box-sizing: border-box;line-height: 12px;text-align: center;margin-right: 2px;padding-right: 3px;">-</i>
                                    <span class="app_name common_blue" style="font-weight: 500;color: #005ACF;">
                                        XXXXX 
                                    </span>
                                </div>
                            </td>
                            <td width="50%" align="right" style="min-height: 30px;font-weight: normal;padding: 5px 10px 5px 30px;box-sizing: border-box;border-bottom: 1px solid #CCCCCC;font-size: 14px;">
                                <span class="cloudroom_amount common_blue" style="font-weight: 500;color: #005ACF;">¥ 2,379,000</span>
                            </td>
                        </tr>
                    </table>
                    <!-- ------------------- 开始 ------------------- -->
                    <div class="resource_loop_group" style="width: 100%;height: auto;overflow: hidden;">
                        <!-- 下钻层级 三 -->
                        <table class="resource_single" cellpadding="20" cellspacing="0" width="100%" align="left" style="border: 1px solid #CCCCCC;border-bottom: none;border-top: none;border-collapse: collapse;">
                            <!-- 勿需变更 -->
                            <tr style="padding-left: 50px;box-sizing: border-box;">
                                <th align="left" style="width: 16.66%;font-weight: 600;padding: 5px 10px;box-sizing: border-box;border-bottom: 1px solid #CCCCCC;font-size: 14px;padding-left: 50px;">
                                    XXXXX 
                                </th>
                                <th align="right" style="width: 16.66%;font-weight: 600;padding: 5px 10px;box-sizing: border-box;border-bottom: 1px solid #CCCCCC;font-size: 14px;border-right: 1px solid #ccc;padding-left: 50px;">
                                    XXXXX 
                                </th>
                                <th align="left" style="width: 16.66%;font-weight: 600;padding: 5px 10px;box-sizing: border-box;border-bottom: 1px solid #CCCCCC;font-size: 14px;">
                                    XXXXX 
                                </th>
                                <th align="right" style="width: 16.66%;font-weight: 600;padding: 5px 10px;box-sizing: border-box;border-bottom: 1px solid #CCCCCC;font-size: 14px;border-right: 1px solid #ccc;">
                                    XXXXX 
                                </th>
                                <th align="left" style="width: 16.66%;font-weight: 600;padding: 5px 10px;box-sizing: border-box;border-bottom: 1px solid #CCCCCC;font-size: 14px;">
                                    XXXXX 
                                </th>
                                <th align="right" style="width: 16.66%;font-weight: 600;padding: 5px 10px;box-sizing: border-box;border-bottom: 1px solid #CCCCCC;font-size: 14px;">
                                    XXXXX 
                                </th>
                            </tr>
                            <!-- 多个循环 tr -->
                            <tr style="padding-left: 50px;box-sizing: border-box;">
                                <td align="left" style="width: 16.66%;font-weight: normal;padding: 5px 10px;box-sizing: border-box;border-bottom: 1px solid #CCCCCC;font-size: 14px;padding-left: 50px;">
                                    XXXXX 
                                </td>
                                <td align="right" style="width: 16.66%;font-weight: normal;padding: 5px 10px;box-sizing: border-box;border-bottom: 1px solid #CCCCCC;font-size: 14px;padding-left: 50px;border-right: 1px solid #ccc;">
                                    ¥ 2,379,000
                                </td>
                                <td align="left" style="width: 16.66%;font-weight: normal;padding: 5px 10px;box-sizing: border-box;border-bottom: 1px solid #CCCCCC;font-size: 14px;">
                                    Azure Monitor
                                </td>
                                <td align="right" style="width: 16.66%;font-weight: normal;padding: 5px 10px;box-sizing: border-box;border-bottom: 1px solid #CCCCCC;font-size: 14px;border-right: 1px solid #ccc;">
                                    ¥ 2,379,000
                                </td>
                                <td align="left" style="width: 16.66%;font-weight: normal;padding: 5px 10px;box-sizing: border-box;border-bottom: 1px solid #CCCCCC;font-size: 14px;">
                                    Azure Monitor
                                </td>
                                <td align="right" style="width: 16.66%;font-weight: normal;padding: 5px 10px;box-sizing: border-box;border-bottom: 1px solid #CCCCCC;font-size: 14px;">
                                    ¥ 2,379,000
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!-- ------------------- 循环 结束 ------------------- -->
                </div>
                <!-- ------------------- 循环 结束 ------------------- -->
            </div>
            <!-- ------------------- 循环 结束 ------------------- -->
        </div>
        <!-- end -->
    </td></tr></table>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值