制作方法

直接在網(wǎng)上搜索“拖拽生成郵件”即可制作HTML郵件格式的精美郵件。推薦國內(nèi)的一款應(yīng)用：拉易網(wǎng)。

郵件格式

郵件發(fā)展多年，一直是很多人溝通聯(lián)系和推廣業(yè)務(wù)的主要工具，很多大公司都會發(fā)HTML郵件，因?yàn)镠TML郵件比普通文本郵件更吸引人，震撼力更強(qiáng)。

但作為一名普通員工，我們?nèi)绻约褐谱饕环膺@樣的HTML郵件，實(shí)在是費(fèi)事費(fèi)力不討好。但好可惜我不是公司的普通員工，作為公司唯一的前端，這個麻煩事情就落在我身上，所以把我的經(jīng)驗(yàn)和解決方案寫出來大家作為參考。

所有文檔聲明無效，不能用給郵件聲明doctype，郵件服務(wù)商會自動為你生成。

所有樣式做好寫在行內(nèi)，因?yàn)橛行┼]件服務(wù)商會去除聲明的style標(biāo)簽（我印象中是微信手機(jī)郵箱就會）。

所有布局使用table布局，如果頁面元素不多，最好是每個元素外都使用一個table包裹，保證最好的郵件兼容性。

寬度適當(dāng)限制，因?yàn)猷]件的內(nèi)容可視區(qū)比較小，最好郵件寬度限制在600-800之間。

最好給文字的元素加上font-size，因?yàn)橛行┼]件服務(wù)商會給P標(biāo)簽?zāi)J(rèn)加上font-size為14px

圖片元素必須設(shè)置行內(nèi)屬性width，最好style同時設(shè)置，否則如果圖片大于你父級元素，outlook下會溢出。

outlook下圖片間隔不能使用padding和margin，如果要設(shè)置圖片間隔，我的做法是外面包裹一層table，然后設(shè)置td的padding

圖片最后不要使用背景的形式，而是直接使用img標(biāo)簽，不然outlook和一些國內(nèi)的郵件服務(wù)商都顯示不了。

不要給圖片加邊框，因?yàn)閎ox-sizing每個郵件服務(wù)商都不同，加邊框后所需要做的兼容性的工作量大量增加。

阿里云郵箱背景不要使用rgba，因?yàn)椴荒茏R別，它默認(rèn)轉(zhuǎn)換為hex。

每個table最好都設(shè)置寬度，已達(dá)到最好的兼容性。

思想不要太前衛(wèi)，思想必須保守，最好退回到2000年前，因?yàn)榻^大部分現(xiàn)在流行的CSS3樣式都不能很好的兼容。

我作為一個公司唯一的小前端，做一封公司的HTML郵件，耗了我大半生的功力，總算是勉強(qiáng)完成了任務(wù)，發(fā)現(xiàn)這樣的事情不是我想需要的。新技術(shù)用不上，想使用css3裝裝逼都不行，兼容性要求大。