时间：2023-07-06 02:45:01 | 来源：网站运营
时间：2023-07-06 02:45:01 来源：网站运营
职场秘技：教你制作出精美的邮件模板："专业"才是职场的秘技，而能够制作出精美的邮件模板也是专业的表现。邮件是职场以及商务沟通非常重要的方式，而职场和商务是最需要体现出专业性的，大公司群发的邮件通常都制作精美、图文搭配、布局精巧，而且邮件还动态适配不同的终端，这篇文章就来从技术的角度教你如何量身定制属于自己的邮件模板，掌握邮件代码开发的秘技。
像易企秀之于H5，秀米之于微信公众号排版，市面上也有一些不错的可视化邮件模板制作工具，比较值得推荐的是MailChimp。MailChimp也是一个邮件群发的平台，它的界面是纯英文的哦。那如何查看邮件的代码呢？QQ邮箱查看邮件代码的方式如下：
Chrome的开发者工具极其强大，专业的前端开发程序员都会使用到它，但它对那些完全不懂技术的小白来说，也有非常多实用的功能，关于Chrome的开发者工具，我们下次会向大家详细介绍一下，敬请关注。
在线咨询
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="format-detection" content="telephone=no"><meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"><meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" /> <title>邮件模板</title></head><body style="padding:0; margin:0"><style type="text/css"><!-- 控制邮件样式的css写在这里 --></style><!-- 邮件正文代码 --></body></html><table cellpadding="0" cellspacing="0" width="100%" class="body" border="0" style="border-spacing: 0;border-collapse: collapse;vertical-align: top;width: 100%;table-layout: fixed"><tbody><tr style="vertical-align: top"><td><!-- 邮件的内容写在这里 --></td></tr></tbody></table>这个思想是不是和写html的时候很相似，不同的是html我们是用一个个div标签和section标签来分块，这里使用table来分块。值得说明的是，邮件代码也可以使用div来分块，只是用table标签来分块写邮件是最常见的做法。把一个整体的网页和一封整体的邮件分成一块块的分别来编辑它们的代码，是不是更加井井有条一些？分块编写是写网页以及写邮件专业化、流程化的做法。我们是用table来分块，这就相当于整封邮件，是一个大的一行一列的表格里面装着很多个多行多列的表格。也就相当于我们是在第二步的<td>标签里面添加了又嵌套了很多个table标签。大家可以查看大疆的邮件代码，把邮件的每一块的table折叠起来，这样一封邮件的代码结构就清晰了。如下图
不过CSS里面有很多属性是用可视化的编辑器实现不了的，比如圆角、虚线、边框、渐变色、透明度、阴影等等，这些都是css经常会使用到的基本属性。不过由于邮件不需要做得那么花哨(邮件的核心是布局)，这里就不多说了。我们写邮件的时候，通过可视化的编辑器往邮件里面插入图片的时候，这个图片经常会溢出，不能适配不同的终端，要么不是太大，就是太小。推荐大家添加的图片为100%的宽度，让图片占满一行。我们可以找到该图片，把该img的width修改成为100%，将height设置为auto。如果是这样就需要一张一张图片处理，你也可以使用css的!important一起设置。
<style type="text/css">table[class="body"] img { height: auto !important; width: 100% !important; }</style><table cellpadding="0" cellspacing="0" width="100%" class="body" border="0" style="border-spacing: 0;border-collapse: collapse;vertical-align: top;width: 100%;table-layout: fixed"><tbody><tr style="vertical-align: top"><td><img src="http://link.dji.com/custloads/290636680/md_625190.jpg" ></td></tr></tbody></table>/* 当屏幕宽度小于650px的时候 */@media only screen and (max-width: 650px) {table[class="body"] .col { width: 100% !important; }}<table cellpadding="0" cellspacing="0" width="100%" class="body" border="0" style="border-spacing: 0;border-collapse: collapse;vertical-align: top;width: 100%;table-layout: fixed"><tbody><tr style="vertical-align: top"><td> <div class="col" style="width: 216px"> </div> <div class="col" style="width: 216px"> </div> <div class="col" style="width: 216px"> </div></td></tr></tbody></table>本文就写到这里，又到了脑暴的时间：关键词：精美,邮件,模板
