由 dawei 从上面可以看到，我们正在使用两个MJML组件：mj-body 和 mj-section。mj-body 定义了我们电子邮件的起点，而 mj-section 定义了一个包含其他组件的节。
对于定义的每个部分，还定义了具有各自十六进制值的 background-color 属性。
/ 公司 Header /
我们电子邮件的此部分仅在中心横幅位置包含我们的公司/品牌名称：
<!-- 公司 Header -->
<mj-section background-color="#f0f0f0">
<mj-column>
<mj-text font-style="bold"
font-size="20px"
align="center"
color="#626262">
Central Park Cruise
</mj-text>
</mj-column>
</mj-section>
mj-column 组件是用来定义一个列。mj-text 组件用于我们的文本内容，并采取字体样式、字体大小、颜色等样式属性。
/ 图片 Header /
在本部分中，我们将有一个背景图片和一段文字，它们应代表我们的公司口号。我们还会有一个号召性用语按钮，指向一个包含更多详细信息的页面。
要添加图片标题，你必须将该部分的背景颜色替换为 background-url。与第一个标题相似，你将不得不在垂直和水平方向上居中放置文本，padding保持不变。
按钮的 href 设置按钮的位置。为了让背景在列中呈现全宽，将列宽设置为600px，width="600px"。
我们的电子邮件的这一部分将只包含我们的公司/品牌名称的中心横幅位置。
<!-- Image Header -->
<mj-section background-url="https://ca-times.brightspotcdn.com/dims4/default/2af165c/2147483647/strip/true/crop/2048x1363+0+0/resize/1440x958!/quality/90/?url=https%3A%2F%2F%2Fimg-4f561d37%2Fturbine%2Forl-disneyfantasy720120306062055"
background-size="cover"
background-repeat="no-repeat">
<mj-column width="600px">
<mj-text align="center"
color="#fff"
font-size="40px"
font-family="Helvetica Neue">Christmas Discount</mj-text>
<mj-button background-color="#F63A4D" href="#">
See Promotions
</mj-button>
</mj-column>
</mj-section>
要使用图像header，我们将向 jms -section 组件添加 background-url 属性，然后使用 background-size 和 background-repeat 属性设置图像的样式。
对于我们的口号文本块，我们使用 align 属性将文本在水平和垂直方向上居中对齐。你还可以根据需要设置文本颜色，字体大小，字体系列等。
号召性用语按钮是使用 mj-button 组件实现的。background-color 属性允许我们指定按钮的背景色，然后使用 href 指定链接或页面的位置。
/ Email件介绍 /
简介文字将由标题，主体文字和号召性用语组成。