我正在尝试使用带有一些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样式。有人可以帮我解决这个问题吗?
答案 0 :(得分:3)
将表格用于电子邮件并应用内联样式(您不是在创建网页!),您还应该阅读电子邮件模板中可接受的CSS使用情况。
margin
,float
,max-width
之类的内容不起作用。