从上面可以看到，我们正在使用两个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/2048×1363+0+0/resize/1440×958!/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件介绍 /

简介文字将由标题，主体文字和号召性用语组成。