分享一个好看的邮件html模板
代码】分享一个好看的邮件html模板。
·
先给大家看看邮箱里的效果图：
模板HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>邮件模板</title>
</head>
<body>
<div style="background: #F0F2F5; padding: 35px; font-size: 14px;">
<div style="width: 750px; margin: 0 auto; background: url('https://www.henghost.com/images/hc_email_background.png') no-repeat center; background-size: cover;">
<div style="padding: 0 15px; padding-bottom: 20px;">
<div style="height: 80px; display: flex; justify-content: space-between; position: relative;">
<div>
<a href="https://www.henghost.com/" target="_blank" rel="noopener"><img style="margin-top: 20px; width: 150px; height: 50px;" src="https://i.loli.net/2019/12/31/mJrcl1RbAk4p5sj.png" height="50" border="0"></a>
</div>
<div>
<div style="font-size: 14px; color: #bddaff; margin-top: 17px;">客户名称：韦君元</div>
<div style="height: 30px; color: #006eff; line-height: 30px; padding: 0 10px; background: #FFFFFF; position: absolute; bottom: 0px; right: 0px;">7*24h 服务热线：+852 5104 3232</div>
</div>
</div>
<div style="background: #fff; padding: 0 15px; padding-bottom: 50px;">
<div style="padding: 0 9px; display: flex; justify-content: space-between; align-items: center; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #DBDBDB;">
<div style="display: flex;">
<a style="color: #333; text-decoration: none;" href="https://www.henghost.com/" target="_blank" rel="noopener"><span class="nav-title" style="margin-right: 50px;">恒创科技</span></a>
<a style="color: #333; text-decoration: none;" href="https://www.henghost.com/sales.shtml?emailbanner" target="_blank" rel="noopener"><span class="nav-title" style="margin-right: 50px;">最新活动</span></a>
<a style="color: #333; text-decoration: none;" href="https://www.henghost.com/help/article/" target="_blank" rel="noopener"><span class="nav-title" style="margin-right: 50px;">帮助文档</span></a>
<a style="color: #333; text-decoration: none;" href="http://wpa.b.qq.com/cgi/wpa.php?ln=1&key=XzkzODE4NTMxN180Nzk2MThfNDAwODYwNjA2OV8" target="_blank" rel="noopener"><span class="nav-title">联系我们</span></a>
</div>
<div style="display: flex;">
<div style="cursor: pointer; background: #006EFF; color: #fff; height: 30px; line-height: 30px; padding: 0 10px; box-sizing: border-box; margin-left: 10px;">
<a style="text-decoration: none; height: 100%; display: inline-block; color: inherit;" href="https://my.henghost.com/clientarea.php?s_url=https://my.henghost.com/clientarea.php?emailbanner" target="_blank" rel="noopener"> 控制台</a>
</div>
</div>
</div>
<div style="color: #41bf71; border: 1px solid #41BF71; background: #E0FFEC; padding: 14px 15px; display: flex; margin-top: 20px; margin-bottom: 30px;"><img style="width: 42px !important; height: 42px !important;" src="https://www.henghost.com/images/hc_console_normal.png" width="42">
<div style="margin-left: 14px;">
<div style="font-size: 16px; font-weight: bold; margin-bottom: 5px;">云服务器开通成功！感谢您对恒创科技的支持。</div>
<div style="width: 600px; line-height: 24px;">
<a style="color: #006eff; text-decoration: none;" href="https://my.henghost.com/list.php" target="_blank" rel="noopener">登录控制台</a> 查看并使用您的云服务器。
<a style="color: #006eff; text-decoration: none;" href="https://www.henghost.com/help/article/584/" target="_blank" rel="noopener">云服务器登录</a>、
<a style="color: #006eff; text-decoration: none;" href="https://www.henghost.com/help/article/596/" target="_blank" rel="noopener">重装系统</a> 等操作请参阅：
<a style="color: #006eff; text-decoration: none;" href="https://www.henghost.com/help/article_cate/29/" target="_blank" rel="noopener">操作指南</a>。</div>
</div>
</div>
<div>
<div><span style="font-size: 16px; font-weight: bold; position: relative; top: -4px;">产品信息</span></div>
<table style="width: 100%; border-spacing: 0px; border-collapse: collapse; border: none; margin-top: 20px;">
<tbody>
<tr style="height: 40px; background: #F6F6F6;">
<th style="border: 1px solid #DBDBDB; color: #666666; font-size: 14px; font-weight: normal; text-align: left; padding-left: 14px;">产品类型</th>
<th style="border: 1px solid #DBDBDB; color: #666666; font-size: 14px; font-weight: normal; text-align: left; padding-left: 14px;">区域</th>
<th style="border: 1px solid #DBDBDB; color: #666666; font-size: 14px; font-weight: normal; text-align: left; padding-left: 14px;">产品 ID</th>
<th style="border: 1px solid #DBDBDB; color: #666666; font-size: 14px; font-weight: normal; text-align: left; padding-left: 14px;">IP 地址</th>
</tr>
<tr style="height: 40px;">
<td style="border: 1px solid #DBDBDB; font-size: 14px; font-weight: normal; text-align: left; padding-left: 14px;">云服务器</td>
<td style="border: 1px solid #DBDBDB; font-size: 14px; font-weight: normal; text-align: left; padding-left: 14px;">中国香港</td>
<td style="border: 1px solid #DBDBDB; font-size: 14px; font-weight: normal; text-align: left; padding-left: 14px;">
<a style="color: #006eff; text-decoration: none;" href="https://my.henghost.com/example.php?id=105807" target="_blank" rel="noopener">cloud105807</a>
</td>
<td style="border: 1px solid #DBDBDB; font-size: 14px; font-weight: normal; text-align: left; padding-left: 14px;">154.204.58.79</td>
</tr>
</tbody>
</table>
</div>
<div style="margin-top: 30px;">
<div><span style="font-size: 16px; font-weight: bold; position: relative; top: -4px;">订单信息</span></div>
<table style="width: 100%; border-spacing: 0px; border-collapse: collapse; border: none; margin-top: 20px;">
<tbody>
<tr style="height: 40px; background: #F6F6F6;">
<th style="border: 1px solid #DBDBDB; color: #666666; font-size: 14px; font-weight: normal; text-align: left; padding-left: 14px;">付款金额</th>
<th style="border: 1px solid #DBDBDB; color: #666666; font-size: 14px; font-weight: normal; text-align: left; padding-left: 14px;">续费金额</th>
<th style="border: 1px solid #DBDBDB; color: #666666; font-size: 14px; font-weight: normal; text-align: left; padding-left: 14px;">开通时间</th>
<th style="border: 1px solid #DBDBDB; color: #666666; font-size: 14px; font-weight: normal; text-align: left; padding-left: 14px;">到期时间</th>
</tr>
<tr style="height: 40px;">
<td style="border: 1px solid #DBDBDB; font-size: 14px; font-weight: normal; text-align: left; padding-left: 14px;">￥0.00元</td>
<td style="border: 1px solid #DBDBDB; font-size: 14px; font-weight: normal; text-align: left; padding-left: 14px;">￥126.00元</td>
<td style="border: 1px solid #DBDBDB; font-size: 14px; font-weight: normal; text-align: left; padding-left: 14px;"><span style="border-bottom: 1px dashed rgb(204, 204, 204); position: relative;" t="5" times="">2022/07/14</span></td>
<td style="border: 1px solid #DBDBDB; font-size: 14px; font-weight: normal; text-align: left; padding-left: 14px;"><span style="border-bottom:1px dashed #ccc;" t="5" times="">2022/08/21</span></td>
</tr>
</tbody>
</table>
</div>
<div style="margin-top: 30px;">
<div><span style="font-size: 16px; font-weight: bold; position: relative; top: -4px;">产品配置：</span></div>
<div style="border: 1px solid #DBDBDB; padding: 10px; padding-bottom: 20px; margin-top: 20px;">
<div style="line-height: 30px;"> 可用区: 香港二区 节点组: 香港1区 CPU: 1核心 内存: 2GB 云系统盘: 50G 公网IP数: 1个 BGP精品带宽: 2M 网络类型: 私有网络 VPC: 0 x 1 安全组: 0 x 1 系统镜像: Windows-2008R2-Datacenter-cn </div>
</div>
</div>
<div style="margin-top: 30px;"><span style="font-size: 14px; font-weight: bold;">温馨提示</span>
<div style="line-height: 24px; margin-top: 10px;">
<div>使用过程中如有任何问题，欢迎通过
<a style="color: #006eff; text-decoration: none;" href="http://wpa.b.qq.com/cgi/wpa.php?ln=1&key=XzkzODE4NTMxN180Nzk2MThfNDAwODYwNjA2OV8" target="_blank" rel="noopener"> 在线客服</a>、
<a style="color: #006eff; text-decoration: none;" href="https://my.henghost.com/subworkorder.php" target="_blank" rel="noopener">提交工单</a>、香港热线等渠道随时联络我们。</div>
</div>
</div>
</div>
</div>
</div>
<table class="responsive-table" style="text-size-adjust: 100%; margin-top: 18px; border-collapse: collapse !important; width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size: 12px; -webkit-font-smoothing: subpixel-antialiased; text-size-adjust: 100%;" align="center" valign="top">
<p style="line-height: 20.4px; text-size-adjust: 100%; font-family: 'Microsoft YaHei'!important; padding: 0px !important; margin: 0px !important; color: #7e8890 !important;"><span class="appleLinks"> Copyright © 2010-2021 SonderCloud Limited (Hong Kong). 保留所有权利。</span></p>
</td>
</tr>
<tr style="padding: 0px; margin: 0px; font-size: 0px; line-height: 0;">
<td style="font-size: 12px; -webkit-font-smoothing: subpixel-antialiased; text-size-adjust: 100%;"> </td>
</tr>
<tr>
<td style="font-size: 12px; -webkit-font-smoothing: subpixel-antialiased; text-size-adjust: 100%;" align="center" valign="top">
<p style="line-height: 20.4px; text-size-adjust: 100%; font-family: 'Microsoft YaHei'!important; padding: 0px !important; margin: 0px !important; color: #7e8890 !important;"><span class="appleLinks">邮件由系统自动发送，请勿直接回复本邮件！</span></p>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
3
0- 0
已为社区贡献15条内容
所有评论(0)