CSS样式不适用于Thymeleaf的电子邮件模板

时间:2015-10-13 12:35:41

标签: html css spring html-email thymeleaf

我正在尝试使用带有一些css样式的百日咳模板通过春季邮件发送电子邮件。

这是我的电子邮件百里香软件模板

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="#{email.invitationToJoinNetwork.title}">Network Invitation</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
    body {
        background-color: #f2f2f2;
    }
    .mail {
        text-align: center;
        font-family: "Open Sans";
        color: #707070;
        margin: 0 auto;
        max-width: 500px;
        _width: 500px;
    }
    .mail-header {
        padding-top: 30px;

    }
    .mail-header h2 {
        font-weight: 100;
        font-size: 40px;
    }
    .mail-body {
        height: 200px;
        padding: 30px 20px 50px;
        border-radius: 2px;
        background: #fcfcfc;
    }
    .mail-body .mail-message {
        height: 100px;
        border-bottom: 2px solid #f2f2f2;
    }
    .mail-footer {
        display: flex;
        margin: 20px auto;
    }
    .mail-footer .half-size {
        width: 50%;
    }
    .image-link {
        height: 80px;
        width: 160px;
    }
    .app {
        margin-top: 15px;
    }
</style>

</head>
    <body>
        <div class="mail mail-header">
            <h2><span th:text="${user.firstName}">User</span> wants you to join network </h2>
    </div>
    <div class="mail mail-body">
        <div class="mail-message">
            <b><span th:text="${user.firstName}">User</span> invited you to network "<span th:text="${network.name}">name</span>".</b><br/>
            To be part of the network, you must accept the invitation in the app.
        </div>
        <div class="mail mail-footer">
            <div class="half-size">
                Get the app for iphone
                <div class="app">
                    <img class="image-link" src="../assets/appstore-iphone.png" />
                </div>
            </div>
            <div class="half-size">
                Get the app for android
                <div class="app">
                    <img class="image-link" src="../assets/appstore-android.png" />
                </div>
            </div>
        </div>
    </div>
</body>
</html>

我的百里香配置

@Bean
    @Description("Thymeleaf template resolver serving HTML 5 emails")
    public ClassLoaderTemplateResolver emailTemplateResolver() {
        ClassLoaderTemplateResolver emailTemplateResolver = new ClassLoaderTemplateResolver();
        emailTemplateResolver.setPrefix("mails/");
        emailTemplateResolver.setSuffix(".html");
        emailTemplateResolver.setTemplateMode("HTML5");
        emailTemplateResolver.setCharacterEncoding(CharEncoding.UTF_8);
        emailTemplateResolver.setOrder(1);
        return emailTemplateResolver;
    }

电子邮件发送成功但没有出现css样式。没有应用于邮件的CSS样式。有人可以帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:3)

将表格用于电子邮件并应用内联样式(您不是在创建网页!),您还应该阅读电子邮件模板中可接受的CSS使用情况。

marginfloatmax-width之类的内容不起作用。

https://www.campaignmonitor.com/css/