由于简书粘贴代码比较繁琐，推荐移步：职场秘技：教你制作出精美的邮件模板
"专业"才是职场的秘技，而能够制作出精美的邮件模板也是专业的表现。
邮件是职场以及商务沟通非常重要的方式，而职场和商务是最需要体现出专业性的，大公司群发的邮件通常都制作精美、图文搭配、布局精巧，而且邮件还动态适配不同的终端，这篇文章就来从技术的角度教你如何量身定制属于自己的邮件模板，掌握邮件代码开发的秘技。
要学会制作邮件模板，需要你有一点HTML和CSS的知识，这些知识并不难，一周的时间就可以学会，点击HackWeek网页开发。你也可以按照本文的方法零基础做一个邮件模板。
如何借鉴优秀的案例
一封精美的邮件是技术、设计、运营、产品等多种思想结合的产物，当我们开始设计我们自己的邮件模板时，如果是从零开始，那确实是一件比较费时费力的事情，我们可以去找一些优秀的案例来借鉴。
要说明一下，如果你只是简单地通过复制案例邮件的正文然后使用可视化编辑器进行自己的加工，很容易改变邮件的结构和整个样式，因此我们最好是拷贝邮件背后的代码再来修改。
像易企秀之于H5，秀米之于微信公众号排版，市面上也有一些不错的可视化邮件模板制作工具，比较值得推荐的是MailChimp。MailChimp也是一个邮件群发的平台，它的界面是纯英文的哦。
那如何查看邮件的代码呢？QQ邮箱查看邮件代码的方式如下：
如果是其他邮箱如163等的邮件除了转发到QQ邮箱外，还有没有其他方法呢？那就是使用Chrome的开发者工具。如下图，找到整封邮件的代码，然后复制出来再来研究~~
Chrome的开发者工具极其强大，专业的前端开发程序员都会使用到它，但它对那些完全不懂技术的小白来说，也有非常多实用的功能，关于Chrome的开发者工具，我们下次会向大家详细介绍一下，敬请关注。
一些准备工作
为了让邮件内容可以直接以网页的形式呈现出来，有两种方式，一种是直接在邮件客户端里面是使用代码来编写(比如QQ邮箱)，比如下图是我收到的大疆公司发的邮件的部分截图，有没有觉得这种排列和底部的设计还是挺不错的？我也把该邮件做成了网页以及为了让代码可读对格式等进行了一些并处理上传到了服务器上，大家可以通过Demystifying Email Design来查看。同时，你也可以将网页另存为就能查看到这封邮件的代码了。
另外一种方法是使用网页编辑工具如Webstorm、Sublime来对代码进行编辑，推荐这种方法，因为邮件所涉及的代码还是挺长的，层级比较多，所以借助于工具可以更加方便地对代码进行编辑。大家编辑的时候注意代码缩进，让代码更加清晰。
下面就从代码的角度来详细说明一个精美的邮件模板是怎么诞生的
第一步：新建一个html文件
使用Sublime或Webstorm等网页编辑工具，新建一个html文件，将如下代码复制粘贴到html文件里面，邮件的正文代码会写在body标签内，我们从QQ邮箱拷贝的代码也是复制粘贴在这个标签里面，保存之后，邮件就做成了网页啦。
控制邮件样式的css支持内联式和嵌入式两种写法，style写在标签里面这个写法和html的规范有点不一样哦，这个要注意一下~在style标签里面我们可以以class和id选择器的形式来定义。
第二步：邮件正文的框架
通常我们把整个邮件的内容都置于一个table标签里面，所以这里我们需要大家对HTML的table标签比较熟悉，HTML的table标签相关知识内容可以学习这里：HTML 标签以及CSS的表格属性：CSS 参考手册
下面先建了一个一行一列的table表格，整封邮件都放到了这个表格里面，表格的宽度为100%,cellpadding、cellspacing、boder-spacing、vertical-align等这些大家学习的时候可以对照我们设置Excel表格来学习，知识都是相通的，不需要死记下来哦(我的记忆力就很差，不是用编辑器提示和查文档，完全没法写代码)~~
第三步：邮件正文的结构
在第二步中，我们确定了邮件正文的整个框架都是一个一行一列的table表格，那么我们开始写邮件的正文啦，写邮件的时候我们都是一段一段分块来写，先写头部，再写中间的，可能中间有好几块，最后是尾部，于是我们可以把每一块都写成一个table表格。
这个思想是不是和写html的时候很相似，不同的是html我们是用一个个div标签和section标签来分块，这里使用table来分块。值得说明的是，邮件代码也可以使用div来分块，只是用table标签来分块写邮件是最常见的做法。把一个整体的网页和一封整体的邮件分成一块块的分别来编辑它们的代码，是不是更加井井有条一些？分块编写是写网页以及写邮件专业化、流程化的做法。
标签里面添加了又嵌套了很多个table标签。大家可以查看大疆的邮件代码，把邮件的每一块的table折叠起来，这样一封邮件的代码结构就清晰了。如下图
标签里面复制了8遍...
当大家把一封复杂的邮件分成一块一块解读时，就发现没有想象之中那么难啦~~
第四步：定义table的样式
在第二步中，我们已经提到html和css关于table标签和属性的资料，大家可以根据需要自行来添加，这里我们说明一下写邮件代码要注意的点。
注意一：为了让整个页面美观，我们需要给整封邮件设置一个宽度，比如Apple Music的邮件是750px，大疆的是650px，这时候就会用到width，width也可以设置成百分比。
注意二：为了让邮件的正文内容不要太靠近边框，我们需要设置一个cellspacing，比如为20px。
注意三：值得说明的是table的很多属性被css给取代了，比如bgcolor，我们可以使用style="background-color:***"来代替，当然你也可以用bgcolor。
注意四：table标签通常只是用来给邮件来分块，类似于html的div的作用，所以在邮件里面使用会跟html的div一样类似与频繁，所以会有table标签的嵌套。而table标签和div标签不同的是，table标签往往是一组，包含tbody，tr，td。大家可以把第二步里面的整个当成一组，确实也是够长的...
第五步：邮件样式的说明
在写邮件的时候，总会涉及到文本、图片、链接、按钮等元素，我们来说明一下这些元素的样式。比如文本、链接的样式，这些我们可以使用邮件客户端自带的编辑器来解决。这里主要介绍一下图片。
不过CSS里面有很多属性是用可视化的编辑器实现不了的，比如圆角、虚线、边框、渐变色、透明度、阴影等等，这些都是css经常会使用到的基本属性。不过由于邮件不需要做得那么花哨(邮件的核心是布局)，这里就不多说了。
我们写邮件的时候，通过可视化的编辑器往邮件里面插入图片的时候，这个图片经常会溢出，不能适配不同的终端，要么不是太大，就是太小。推荐大家添加的图片为100%的宽度，让图片占满一行。我们可以找到该图片，把该img的width修改成为100%，将height设置为auto。如果是这样就需要一张一张图片处理，你也可以使用css的!important一起设置。
table[class="body"] img { height: auto !important; width: 100% !important; }
第六步：邮件的响应式布局
通常我们用代码编写多行多列的时候用到的并不是table表格，而往往使用div标签，也就是说table在邮件里面起到的作用就是进行分块搭建邮件的结构以及制作一些真正的表格(表格的样式固定)，如腾讯企业邮箱报价表：
而像大疆邮件里面的三个产品是一个table，但是三个产品的排列却不是用table的一行三列来做的；底部关于我们部分，左边2/3右边1/3,这样看似用表格可以实现的布局方式通常不用table来实现，这是因为要实现响应式的布局(当在手机上打开这封邮件时，一行三列会变成三行一列)，也就是为了让邮件适配到不同的终端，table适合做固定布局，但不大适合做响应式布局(虽然也可以，但是现在大家都不这么用了)。
那我们在代码上该如何实现呢？这里我们需要用到媒体查询（media query）的知识。比如你整封邮件设置的宽度为650px。响应式布局其实是有两套以上的css，当打开邮件的终端屏幕宽度大于650px时，为一套，这时你可以固定每个分栏的宽度；当屏幕小于650px时，每个分栏就要有所调整了。
比如大疆的邮件的例子，当屏幕宽度大于650px时，每个分栏的宽度为216px，但是当屏幕小于650px时，每个分栏的宽度就变成了100%了。
本文就写到这里，又到了脑暴的时间：
邮件到底不支持哪些html标签和CSS属性呢？
邮件作为网页除了有终端适配的问题，不同的邮件客户端是否也存在适配问题呢？
H5模板催生了一系列创业公司，那邮件模板呢？你是否可以挖掘其中的商机？
如果你遇到了问题，或者有更好的经验与创意，欢迎大家关注HackWeek技术社区(微信号：hackweekorg)。
