“开启掘金成长之旅！这是我参与「掘金日新计划 · 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> 您管辖区域下, 已新增这些离线设备, 详细信息如下:</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"> 如有需要,请及时联系相关人员进行处理</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;"> 公司地址: 地址在这里哦</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;"> 客服热线: 电话在这里啦</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;"> 公司邮箱: 邮箱要填哦</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: 因为涉及到公司,所以里面有关公司的信息,我都替换掉了,比如图片资源啊,跳转链接等,参考的小伙伴自己注意下哦
以下是具体的页面展示:
PS:以上就是兼容outlook的邮件HTML,我的举例只是最简单的一个demo,大家根据自己的需求自行修改即可,具体内容我也是用最通俗易懂的方式来讲解了,有不清楚的,可以评论,大家一起讨论讨论。
最后,祝大家发大财~
