MJML
MJML，the only framework that makes responsive-email easy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| <mjml>
<mj-head>
<mj-attributes>
<mj-text font-size="18px" color="#6266EA" />
<mj-class name="container" background-color="#eee" border-radius="10px" padding-top="10px" padding-bottom="10px" />
<mj-class name="title" font-size="24px" font-weight="bold" />
<mj-class name="summary" line-height="1.5" />
<mj-all font-family="Microsoft YaHei" />
</mj-attributes>
<mj-style>
@media all and (max-width: 480px) {
div[style*="font-size:24px;"] {
text-align: center !important;
}
}
table {
counter-reset: count;
}
div[style*="font-size:18px;"]:before {
content: counter(count) ".";
counter-increment: count;
font-weight: 1000;
background: "#6266EA";
}
</mj-style>
</mj-head>
<mj-body>
<mj-section>
<mj-column mj-class="container">
<mj-text mj-class="title">本周工作重点</mj-text>
<mj-divider border-color="#6266EA"></mj-divider>
<mj-text mj-class="summary">对之前一些用户体验前佳的地方进行改进和补充</mj-text>
</mj-column>
</mj-section>
<mj-section>
<mj-column mj-class="container">
<mj-text mj-class="title">本周工作产出</mj-text>
<mj-divider border-color="#6266EA"></mj-divider>
<mj-text>对之前一些用户体验前佳的地方进行改进和补充</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
|