邮件模板定义

最新推荐文章于 2023-09-07 15:42:25 发布

weixin_30580341

最新推荐文章于 2023-09-07 15:42:25 发布

阅读量134

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/HQFZ/p/5909538.html

本文介绍了一种将CSS样式内联到HTML代码中的方法，以便更好地支持邮件客户端显示复杂样式的邮件模板。通过使用TheAutomaticCSSInlinerTool工具，可以轻松地将普通的HTML和CSS代码转换为适用于邮件的通知模板。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在发送通知邮件的时候，假如可以有漂亮的邮件模板就更好了，但是出于安全的原因，邮件一般不支持 link 或者 style 样式，只能通过内联的方式。找到了 The Automatic CSS Inliner Tool。有了自动转换工具，那就简单了。首先，编写普通的 html 代码，把 css 样式放到 style 标签中

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>邮件模板</title>
    <style>
        .panel {
            width: 300px;
            margin: 20px;
            border-radius: 4px;
            border: 1px solid #bce8f1;
        }
        .panel-title {
            padding: 10px 15px;
            color: #31708f;
            background-color: #d9edf7;
            border-color: #bce8f1;
            border-radius: 4px 4px 0 0;
        }
        .panel-body {
            padding: 15px;
            color: #3a87ad;
            font-size: 30px;
            text-align: center;
        }
        .panel-success {
            border: 1px solid #d6e9c6;
        }
        .panel-success .panel-title {
            color: #3c763d;
            background-color: #dff0d8;
            border-color: #d6e9c6;
        }
        .panel-success .panel-body {
            color: #468847;
        }
        .panel-danger {
            border: 1px solid #ebccd1;
        }
        .panel-danger .panel-title {
            color: #a94442;
            background-color: #f2dede;
            border-color: #ebccd1;
        }
        .panel-danger .panel-body {
            color: #b94a48;
        }
    </style>
</head>
<body>
<div class="panel">
    <div class="panel-title">
        测试标题
    </div>
    <div class="panel-body">
        测试内容
    </div>
</div>
<div class="panel panel-success">
    <div class="panel-title">
        测试标题
    </div>
    <div class="panel-body">
        测试内容
    </div>
</div>
<div class="panel panel-danger">
    <div class="panel-title">
        测试标题
    </div>
    <div class="panel-body">
        测试内容
    </div>
</div>
</body>
</html>