由于簡書粘貼代碼比較繁瑣，推薦移步：職場秘技：教你制作出精美的郵件模板
"專業"才是職場的秘技，而能夠制作出精美的郵件模板也是專業的表現。
郵件是職場以及商務溝通非常重要的方式，而職場和商務是最需要體現出專業性的，大公司群發的郵件通常都制作精美、圖文搭配、布局精巧，而且郵件還動態適配不同的終端，這篇文章就來從技術的角度教你如何量身定制屬于自己的郵件模板，掌握郵件代碼開發的秘技。
要學會制作郵件模板，需要你有一點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)。
