个人中心
gpt4 book ai didi

html - 使用nodemailer发送模板电子邮件，样式损坏

转载 作者：行者123 更新时间：2023-12-02 20:11:35 26 4
gpt4 key购买 nike

尝试使用nodemailer发送模板电子邮件并使用 Handlebars 制作模板。

电子邮件确实已发送，但电子邮件的样式不正确。看起来像这样

enter image description here

我已附上我在 Handlebars 模板中编写的内容

<!DOCTYPE html>
<html>
    <head>
    <title>Welcome to</title>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Cabin');
        body { margin: 0; padding: 0; left: 0; top: 0; background-color: white; }
        h1 { font-family: 'Cabin'; font-weight: 600; color: rgba(5,45,84,1); margin-left: 2px;}
        p { font-family: 'Cabin'; font-weight: 400; font-size: 11pt; color: rgba(5,45,84,1); margin-left: 2px; }
        h3 {
            margin-top: 50px;
            color: rgba(5,45,84,.25);
            font-family: 'Cabin'; 
            font-weight: 400; 
            font-size: 10pt;
            width: 80vw;
        }
        h2 {
            text-align: center;
            margin-top: 25px;
            margin-bottom: 10px;
            color: rgba(5,45,84,1);
            font-family: 'Cabin'; 
            font-weight: 400; 
            font-size: 10pt;
        }
        h3 > a { color: rgba(118,146,255,1); }
        h3 > a:hover { cursor: pointer; }
        h3 > a:active { opacity: .75; }
        .page-container { width: 80vw; margin-left: 10vw; }
        .logo { margin-left: 2px; height: 30px; margin-top: 20px; margin-bottom: 20px; }
        .divider { height: 1px; width: 100%; background-color: rgba(5,45,84,.1); margin-bottom: 40px; }
        .button-container {
            width: 100%;
            height: 50px;
            margin-top: 25px;
            margin-bottom: 25px;
            display: flex;
            flex-direction: column;
        }
        .cta {
            transition: all 200ms; 
            -webkit-transition: all 200ms; 
            -moz-transition: all 200ms; 
            -o-transition: all 200ms;
            -ms-transition: all 200ms;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 46px;
            color: white;
            font-size: 11pt;
            font-family: 'Cabin';
            font-weight: 500;
            padding-left: 20px;
            padding-right: 20px;
            background-color: #7692FF;
            border-radius: 5px;
            margin-top: 0px;
            margin-bottom: 4px;
            box-shadow: 0px 4px rgba(118,146,255,.25);
        }
        .cta:hover {
            cursor: pointer;
        }
        .cta:active {
            margin-top: 4px;
            margin-bottom: 0px;
            box-shadow: 0px 0px rgba(118,146,255,.25);
        }
        .footer-container {
            width: 100%;
            margin-top: 50px;
            padding-bottom: 10px;
            background-color: rgba(5,45,84,.04);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    </style>
    </head>
    <body>
        <div class="page-container">
        <div class="divider"></div>
        <h1>Welcome to</h1>
        <p>
            Hi Matthew, thanks for signing up for. We're so happy to have you! almost ready to join your first group. Click the link below to verify your email.
        </p>
        <div class="button-container">
            <div class="cta">
            GET STARTED
            </div>
        </div>
        <p>
            We'll reach out again when we're ready for you to start using. Just reply to this email if you have any questions.
        </p>
        <p>
            - Team Something
        </p>
        </div>
        <div class="footer-container">
        <h3 class="footer">
            If you need help, respond to this message. If this message was sent to you by mistake and you did not sign up for an account with us, we apologize.
        </h3>
        <h2>a9 Something 2018</h2>
        </div>
    </body>
</html>

在我看来，有些样式不适用，从谷歌导入的字体，按钮上单词的居中和框阴影。 Flex 可以与 Handlebars 配合使用吗？

最佳答案

电子邮件客户端因显示问题而臭名昭著。始终建议使用嵌套表格和一些基本元素，但主要是表格。

使用内联样式，并尽可能保持基本样式。大多数 HTML5 都不会得到完全支持。

关于html - 使用nodemailer发送模板电子邮件，样式损坏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53452155/

26 4 0
文章推荐： oracle-apex - 如何使用 SQLPLUS 导入 APEX 应用程序
文章推荐： python - Numpy:用 numpy 数组替换 numpy 数组中的零
文章推荐： mx-record - 尚未设置此域的 Yandex Connect MX 记录
文章推荐： python - pandas 获取带有列表的列的虚拟值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com