工作过程中,偶尔会遇到需要发送邮件的功能,但是对于一些大公司而言,通常使用的是 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;">
6月XXXXX <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>