使用拉易网生成图文并茂的精美HTML邮件（三）

制作精美HTML邮件第二天

今天继续使用拉易网进行腾讯商户平台审核成功通知的制作，先看看今天需要制作的内容，效果如图：

按照惯例，我们先分析一下整体效果：

第一部分是一个横线标题：我们可以看作是一个两边是横线，中间是文字的三列式容器。采用横线组件、文字组件和三列式容器来将其实现。

第二部分上面是一段文字，下面是左中右三列式结构：文字部分使用文字组件+背景实现；三列式结构中，竖横线的高度要比第一列的图片和第三列的文字和要高，所以需要使用子容器包裹着两边的图片和文字。

第三部分为文字+按钮：比较简单，使用文字和按钮可以实现。

第一部分

1. 我们先拖拽出一个三列式组件，然后设置组件比例为2:1:2，效果图如下：

   

2. 将横线拖进三列式组件的第一列，并设置宽度和填充，效果图如下：

   

3. 复制一份横线组件拖放到第三列，这里注意：如果直接在容器内复制，会默认按照当前列数的比例复制到后一列，所以会影响第二列的比例，所以我们先将设置好的横线移出容器，然后再复制，分别移入第一列和第三列。效果图如下：

   

   

4. 将文本组件拖进第二列并设置基本属性，效果图如下：

   

   到这里第一部分就已经制作完毕了，学到这里感觉使用拉易网生成精美邮件还是挺简单的，如果前面的技巧大家都已经掌握的话，那么你已经学会了60%的操作。那么接下来的第二部分制作，会让大家一下子从60%马上升级到90%。

第二部分

1. 这部分分为两个小部分，我们先制作文字部分，拖拽出一个文字组件，然后设置绿点背景和文字描述等基本属性，效果图：

   

2. 拖拽出一个三列式并设置比例，如图：

   

3. 拖放子容器进入第一列和第三列，如图：

   

4. 分别从左侧拖出两个文本组件进入子容器，并进行设置，效果：

   

5. 设置二维码图片，从左侧拖放图片组件进子容器的第二行，并设置远程地址。效果图如下：

   

6. 拖出竖分割线进容器的第二列，并进行设置。如图：

   

7. 分别拖出两个文本组件进入子容器，并进行设置。如图：

   

   到这里第二部分也已经制作完毕，灵活运用子容器和容器的组合，能让大家做起HTML邮件来得心应手，游刃有余。所以，学会了第二部分后，邮件制作功力马上提升到80%的程度并不夸张。

接下来继续我们今天最后部分的制作。

第三部分

学会子容器后，再次分析第三部分，看到时两个结构差不多的列表，可以使用复制功能，那么就需要将第一个列表使用子容器包裹才能整体复制。因为有前面的基础，下面的只是灵活应用，所以就再不详细讲解。

1. 拖拽出一个容器，然后拖拽一个三横式子容器进入容器，效果图：

   

2. 发现第一行之前已经制作过，可以复制拖进子容器，如图：

   

3. 拖放文字进去，分别设置文字样式，效果图：

   

4. 拖出按钮组件进入子容器，然后设置其基本属性。如图：

   

5. 最后一个列表是类似的，整体复制一份就可以了。如图：

   

6. 修改复制出来的文字即可，如图：

   

   到这里，这个微信商户平台审核通知的邮件制作就差不多已经到了尾声，还有剩下的部分都是对之前学到的东西的灵活应用。制作前，先看清整体结构再开始，想清楚使用怎么样的组件组合，才能事倍功半。

   明天继续剩下的邮件制作，到这里大家可以去填一下昨天那篇教学给大家的两个坑，有兴趣的小伙伴可以自行试一下怎么处理。