做微信小編的同學們都與過這個問題吧场刑。在word里辛辛苦苦做好了文章的排版編輯般此，Ctrl C + Ctrl V到微信編輯器里，我勒個擦擦牵现，全TM亂了铐懊。
如何實現(xiàn)漂亮的微信排版？百度一下瞎疼，發(fā)現(xiàn)問此類問題人有很多科乎，網友的回答也就是安利幾款第三方編輯器，最牛逼的回答也就是唐三藏在知乎上先拆解微信各種打開要素贼急，然后就是將自家的i排版的各種功能通通講解一遍茅茂。
開始前，我們要先明確一件事太抓，漂亮的排版不是學個技巧就能解決的空闲。想做好微信圖文排版，是需要有大量的閱讀經驗作為基礎走敌，同時需要有對美的最基本的判斷能力碴倾。
今天，我就給大家分享一個真正牛逼的微信排版技巧掉丽，學習所需工具HTML+CSS+取色器+帶有HTML編輯功能的第三方編輯器影斑。
我們以咪蒙著名的一篇文章《致賤人》的一段內容做例子，手把手教你如何用HTML+CSS來實現(xiàn)同樣的排版效果机打。
一、先用markdown來寫出內容
使用markdown來寫作的好處片迅，是markdown內容是純文本，純文本就是不帶有格式的文本，在不需要在后期編輯時去擔心格式間產生沖突透绩，導致排版時格式失去控制兆龙。markdown的語法就不做介紹了，知乎上有各路大神在安利markdown耻台，大家自行百度空免，很簡單的，學會后碼字就是一種享受盆耽。
工具推薦：
-
客戶端：
- Mac系統(tǒng)：Mou蹋砚、Day one……（Mac下可用markdown應用超多扼菠，自選一款）；
- win系統(tǒng)：MarkdownPad 2坝咐；
網頁版：簡書循榆；
將內容復制到編輯器中,
二、用HTML標簽劃分內容框架
在HTML編輯框中墨坚，針對內容不同部分（頭秧饮、正文、文尾）設置框架泽篮，在設置框架前的代碼盗尸，
<p>
<span style="font-size:13.27px;font-family:Hiragino Sans GB,Droid sansfallback,Droid Sans,Heiti SC bold;">“舉手之勞”是我的謙辭，不是你用來道德綁架的說辭帽撑。</span><br/></p>
<p>
1 <br/><br/> 是的泼各，我寫過《所謂情商，就是好好說話》油狂。<br/>但最近我的情商真的不夠用了历恐。 <br/>有人不知道從哪弄來的我的電話，上來就說：“咪蒙专筷，我很喜歡你弱贼。我在創(chuàng)業(yè)。所以磷蛹，你免費幫我寫篇軟文吮旅，宣傳我的APP吧∥犊龋”<br/> 還沒等我回答庇勃，她就開啟了傳銷模式，一直講她創(chuàng)業(yè)有多艱辛槽驶，并且每句話之間無縫拼接责嚷，好難打斷。 <br/>然后她就講了1個多小時掂铐，我真的好想死罕拂。我只好一邊聽她說話，一邊下載了她的APP研究了一下全陨，實在是太爛了爆班，爛到爆<br/>我只好打斷她，說辱姨，不好意思柿菩，我?guī)筒簧厦Α?<br/>她就怒了，她真的怒了雨涛。<br/>她直接訓斥我：“我都說了1個多小時枢舶，口水都說干了懦胞，你都沒聽進去嗎？祟辟？你也是創(chuàng)業(yè)的医瘫，你有沒有同情心？我還以為你是個好人呢旧困，沒想到你這么冷漠醇份！我對你太失望了！<br/>我擦吼具。<br/>你創(chuàng)業(yè)你牛逼傲欧住？<br/>你弱你有理稗趾小怖竭？<br/>你耽誤了我1個多小時你還有臉說？<br/>你創(chuàng)業(yè)也得靠產品說話陡蝇，賣慘是很low的你知道嗎痊臭？<br/>你這么苦大仇深，你怎么不去《中國好聲音》登夫？ <br/>還有什么比采用道德綁架的方式广匙，去強制別人幫你，更惡心的恼策？<br/>這時候千言萬語都比不上一句操你媽鸦致。 <br/><br/>2 <br/><br/>本來我一直以為，以前微博上的一個人涣楷，已經是全世界最奇葩的了分唾。<br/>她給我發(fā)私信說：“咪蒙，我不想花錢買你的書狮斗。所以绽乔，你直接傳整本書稿的word文檔給我吧。要知道碳褒，一般作家的書連word文檔我都懶得看的迄汛。你該感謝我喜歡你≈枋樱”<br/>我感謝你啊。 <br/>我感謝你大爺鹃觉。<br/>最近又遇到很多“活久見”的例子专酗。<br/>有人找我約稿。<br/>她說：我覺得你文章寫得不錯盗扇。給我們雜志投稿吧祷肯！<br/>我說：不好意思沉填，我沒空寫別的稿子。我平常寫微信公號佑笋、寫劇本已經很忙了翼闹。抱歉啊。<br/>她就說：哦蒋纬，我懂了猎荠。我看過你那篇《所謂情商，就是好好說話》蜀备，你用的就是第29條嘛关摇，“拒絕別人，可以先自責”…… <br/> 我只好說：這都被你看出來了碾阁，哈哈哈输虱。。脂凶。不過不好意思宪睹，我是真的忙不過來。她立馬就翻臉了：你不是說情商高就是心中有他人嗎蚕钦？你就不能考慮一下我的感受亭病？時間擠一擠不就有了？<br/>我擦冠桃。<br/>我覺得我應該在”情商高“那篇文章里面加一條： <br/>別不好意思拒絕別人命贴，反正那些好意思為難你的人，也不是什么好人食听。 <br/>
</p>
<p>
<br/>如果善良就是縱容你們這幫傻逼胸蛛，我愿意一輩子都歹毒下去。<br/>
</p>
在設置框架后的代碼樱报，
<section class="text-head" style="margin-bottom: 15px;">
<p>
<span style="font-size:13.27px;font-family:Hiragino Sans GB,Droid sansfallback,Droid Sans,Heiti SC bold;">“舉手之勞”是我的謙辭葬项，不是你用來道德綁架的說辭。</span><br/>
</p>
</section>
<section class="text" style="font-size:15px;font-family:Hiragino Sans GB,Droid sansfallback,Droid Sans,Heiti SC bold;color:#737372;margin:0em 2em ;line-height:1.25em;">
<p>
1 <br/><br/> 是的迹蛤，我寫過《所謂情商民珍，就是好好說話》。<br/>但最近我的情商真的不夠用了盗飒。 <br/>有人不知道從哪弄來的我的電話嚷量，上來就說：“咪蒙，我很喜歡你逆趣。我在創(chuàng)業(yè)蝶溶。所以，你免費幫我寫篇軟文，宣傳我的APP吧抖所±嬷荩”<br/> 還沒等我回答，她就開啟了傳銷模式田轧，一直講她創(chuàng)業(yè)有多艱辛暴匠，并且每句話之間無縫拼接，好難打斷傻粘。 <br/>然后她就講了1個多小時每窖，我真的好想死。我只好一邊聽她說話抹腿，一邊下載了她的APP研究了一下岛请，實在是太爛了，爛到爆<br/>我只好打斷她警绩，說崇败，不好意思，我?guī)筒簧厦Α?<br/>她就怒了肩祥，她真的怒了后室。<br/>她直接訓斥我：“我都說了1個多小時，口水都說干了混狠，你都沒聽進去嗎岸霹？？你也是創(chuàng)業(yè)的将饺，你有沒有同情心贡避？我還以為你是個好人呢，沒想到你這么冷漠予弧！我對你太失望了刮吧！<br/>我擦。<br/>你創(chuàng)業(yè)你牛逼耙锤颉杀捻？<br/>你弱你有理啊蚓庭？<br/>你耽誤了我1個多小時你還有臉說致讥？<br/>你創(chuàng)業(yè)也得靠產品說話，賣慘是很low的你知道嗎器赞？<br/>你這么苦大仇深垢袱，你怎么不去《中國好聲音》？ <br/>還有什么比采用道德綁架的方式港柜，去強制別人幫你惶桐，更惡心的？<br/>這時候千言萬語都比不上一句操你媽。 <br/><br/>
</p>
<p>
2 <br/><br/>本來我一直以為姚糊，以前微博上的一個人，已經是全世界最奇葩的了授舟。<br/>她給我發(fā)私信說：“咪蒙救恨，我不想花錢買你的書。所以释树，你直接傳整本書稿的word文檔給我吧肠槽。要知道，一般作家的書連word文檔我都懶得看的奢啥。你該感謝我喜歡你秸仙。”<br/>我感謝你啊桩盲。 <br/>我感謝你大爺寂纪。<br/>最近又遇到很多“活久見”的例子。<br/>有人找我約稿赌结。<br/>她說：我覺得你文章寫得不錯捞蛋。給我們雜志投稿吧！<br/>我說：不好意思柬姚，我沒空寫別的稿子拟杉。我平常寫微信公號、寫劇本已經很忙了量承。抱歉啊搬设。<br/>她就說：哦，我懂了撕捍。我看過你那篇《所謂情商拿穴，就是好好說話》，你用的就是第29條嘛卦洽，“拒絕別人贞言，可以先自責”…… <br/> 我只好說：這都被你看出來了，哈哈哈阀蒂。该窗。。不過不好意思蚤霞，我是真的忙不過來酗失。她立馬就翻臉了：你不是說情商高就是心中有他人嗎？你就不能考慮一下我的感受昧绣？時間擠一擠不就有了规肴？<br/>我擦。<br/>我覺得我應該在”情商高“那篇文章里面加一條： <br/>別不好意思拒絕別人，反正那些好意思為難你的人拖刃，也不是什么好人删壮。<br/>
</p>
</section>
<section class="text-foot" style="">
<p> <br/>如果善良就是縱容你們這幫傻逼，我愿意一輩子都歹毒下去兑牡。<br/>
</p>
</section>
然后我們將三個塊狀標簽<section>分別用CSS來設置樣式央碟。
三、用CSS設置樣式均函，實現(xiàn)圖文排版
正文部分樣式設置
正文部分我用<section class="text">來表示亿虽，所以正文部分的樣式就是在class="text"后面加上style=""，在""雙引號中間加入我們想要設置的樣式;
字號設置為15像素大小苞也，font-size代表的是字號洛勉，font-size：15px；的意思是如迟，將字號置為15像素大惺蘸痢；
設置字體氓涣，font-family代表的是字體牛哺，font-family:Hiragino Sans GB,Droid sansfallback,Droid Sans,Heiti SC bold;的意思是，將字體設置為Hiragino Sans GB劳吠，如果手機系統(tǒng)沒有這個字體引润，就用Droid sansfallback字體，依此類推選擇Droid Sans痒玩、Heiti SC bold字體淳附，邏輯是按照順序選擇，如果系統(tǒng)帶有這個字體蠢古，那么就采用奴曙，如果沒有，瀏覽器自動讀取下一個字體草讶，如果都沒有洽糟，就采用系統(tǒng)自帶字體；
設置兩邊縮進堕战，我們用外邊距來實現(xiàn)坤溃，margin代表外邊距，margin:0em 2em;代表上下外邊距為0嘱丢，左右外邊距為字體大小的2倍薪介，即左右兩端2倍縮進；
設置行間距越驻，line-height代表行間距（行高）汁政，我們想設置1.25倍行間距道偷，就可以寫line-height:2em;，注意：行距 = 行間距（行高） - 第一行字號的一半 - 第二行字號的一半记劈；
文字顏色的設置勺鸦，使用color來進行設置，在這里需要有一個取色器目木，很多軟件都有這個功能祝旷，用取色器抓取你想要設置的文字顏色，
通過抓取到的顏色的數(shù)值嘶窄，我們可以用color:#737372;來實現(xiàn)。
將這一系列的樣式寫在一起是這樣的距贷，
style="font-size:15px;font-family:Hiragino Sans GB,Droid sansfallback,Droid Sans,Heiti SC bold;color:#737372;margin:0em 2em;line-height:1.25em;"
顯示效果是這樣的柄冲，
單獨對部分文字設置樣式
先給圖片下的介紹文字單獨設置<span></span>標簽，再用style屬性寫樣式忠蝗，
<span style="font-size:13.27px;font-family:Hiragino Sans GB,Droid sansfallback,Droid Sans,Heiti SC bold;">“舉手之勞”是我的謙辭现横，不是你用來道德綁架的說辭。</span>
用font-size：13.27px阁最；將字號設置為13.27像素大薪潇簟；用font-family:Hiragino Sans GB,Droid sansfallback,Droid Sans,Heiti SC bold;將字體依次設置為Hiragino Sans GB速种，Droid sansfallback姜盈，Droid Sans,Heiti SC bold字體，如果都沒有配阵，就采用系統(tǒng)自帶字體馏颂。用color:#a0a0a0;
將文字顏色設置為灰色，
用line-height:1.2em;將行間距設置為1.2倍棋傍。我們想將對賤人講話的內容做強化標記救拉，用<strong></strong>標簽，將
你創(chuàng)業(yè)你牛逼疤奔稹亿絮？
你弱你有理啊?
加粗，形成更強大的爆發(fā)力麸拄，
<strong>你創(chuàng)業(yè)你牛逼芭擅痢？<br/>你弱你有理啊?</strong>
顯示效果是這樣的感帅，
由于圖片是在網上找的斗锭，我們在正文最后標注一下“（圖片來源于網絡）”，用一個新的<p>標簽失球，用text-align:right;將文字設置為右對齊岖是，由于不是正文內容帮毁，只是一個標注，所以顏色設置為color:#a0a0a0;豺撑，字號設置為12px烈疚，行高設置高一些，能跟正文內容部分拉開一定的距離聪轿，就用固定行高line-height:24px;爷肝，即2倍行間距，這部分整體代碼是這個樣子的陆错，
<p style="text-align:right;">
<span style="text-align:right;color:#a0a0a0;font-size:12px;line-height:24px;">（圖片來源于網絡）</span>
</p>
顯示效果是這樣的灯抛，
對文尾做樣式設置
文尾我們用class="text-foot"來為<section>做標記，最后一句話是咪蒙對整篇文章的總結音瓷，我們用水平居中來處理对嚼，水平居中用text-align:center;，字體設置同上绳慎，字號選用16像素纵竖，顏色配合主題顏色，仍采用灰色#a0a0a0杏愤，整體代碼是這樣的靡砌，
<section class="text-foot" style="text-align:center;font-family:Hiragino Sans GB,Droid sansfallback,Droid Sans,Heiti SC bold;font-size:16px;color:#a0a0a0;">
<p>
<br/>如果善良就是縱容你們這幫傻逼，我愿意一輩子都歹毒下去珊楼。<br/>
</p>
</section>
我們將代碼整體展示一下通殃，
<section class="text-head" style="margin-bottom: 15px;">
<p>
<span style="font-size:13.27px;font-family:Hiragino Sans GB,Droid sansfallback,Droid Sans,Heiti SC bold;color:#a0a0a0;line-height:1.2em;">“舉手之勞”是我的謙辭，不是你用來道德綁架的說辭亥曹。</span><br/>
</p>
</section>
<section class="text" style="font-size:15px;font-family:Hiragino Sans GB,Droid sansfallback,Droid Sans,Heiti SC bold;color:#737372;margin:0em 2em ;line-height:1.25em;">
<p>
1<br/><br/>是的邓了，我寫過《所謂情商，就是好好說話》媳瞪。<br/>但最近我的情商真的不夠用了骗炉。 <br/>有人不知道從哪弄來的我的電話，上來就說：“咪蒙蛇受，我很喜歡你句葵。我在創(chuàng)業(yè)。所以兢仰，你免費幫我寫篇軟文乍丈，宣傳我的APP吧“呀”<br/> 還沒等我回答轻专，她就開啟了傳銷模式，一直講她創(chuàng)業(yè)有多艱辛察蹲，并且每句話之間無縫拼接请垛，好難打斷催训。 <br/>然后她就講了1個多小時，我真的好想死宗收。我只好一邊聽她說話漫拭，一邊下載了她的APP研究了一下，實在是太爛了混稽，爛到爆<br/>我只好打斷她采驻，說，不好意思匈勋，我?guī)筒簧厦Α?<br/>她就怒了礼旅，她真的怒了。<br/>她直接訓斥我：“我都說了1個多小時洽洁，口水都說干了各淀，你都沒聽進去嗎？诡挂？你也是創(chuàng)業(yè)的，你有沒有同情心临谱？我還以為你是個好人呢璃俗，沒想到你這么冷漠！我對你太失望了悉默！<br/>我擦城豁。<br/><strong>你創(chuàng)業(yè)你牛逼啊抄课？<br/>你弱你有理俺恰？</strong><br/>你耽誤了我1個多小時你還有臉說跟磨？<br/>你創(chuàng)業(yè)也得靠產品說話间聊，賣慘是很low的你知道嗎？<br/>你這么苦大仇深抵拘，你怎么不去《中國好聲音》哎榴？ <br/>還有什么比采用道德綁架的方式，去強制別人幫你僵蛛，更惡心的尚蝌？<br/>這時候千言萬語都比不上一句操你媽。 <br/><br/>
</p>
<p>
2<br/><br/>本來我一直以為充尉，以前微博上的一個人飘言，已經是全世界最奇葩的了。<br/>她給我發(fā)私信說：“咪蒙驼侠，我不想花錢買你的書姿鸿。所以谆吴，你直接傳整本書稿的word文檔給我吧。要知道般妙，一般作家的書連word文檔我都懶得看的纪铺。你該感謝我喜歡你〉欤”<br/>我感謝你啊鲜锚。 <br/>我感謝你大爺。<br/>最近又遇到很多“活久見”的例子苫拍。<br/>有人找我約稿芜繁。<br/>她說：我覺得你文章寫得不錯。給我們雜志投稿吧绒极！<br/>我說：不好意思骏令，我沒空寫別的稿子。我平常寫微信公號垄提、寫劇本已經很忙了榔袋。抱歉啊。<br/>她就說：哦铡俐，我懂了凰兑。我看過你那篇《所謂情商，就是好好說話》审丘，你用的就是第29條嘛吏够，“拒絕別人，可以先自責”…… <br/> 我只好說：這都被你看出來了滩报，哈哈哈锅知。。脓钾。不過不好意思售睹，我是真的忙不過來。她立馬就翻臉了：你不是說情商高就是心中有他人嗎可训？你就不能考慮一下我的感受侣姆？時間擠一擠不就有了？<br/>我擦沉噩。<br/>我覺得我應該在”情商高“那篇文章里面加一條： <br/>別不好意思拒絕別人捺宗，反正那些好意思為難你的人，也不是什么好人川蒙。 <br/><br/>
</p>
<p style="text-align: right;">
<span style="text-align: right;color: rgb(160, 160, 160); font-size: 12px; line-height: 24px; ">（圖片來源于網絡）</span>
</p>
</section>
<section class="text-foot" style="text-align:center;font-family:Hiragino Sans GB,Droid sansfallback,Droid Sans,Heiti SC bold;font-size:16px;color:#a0a0a0;">
<p>
<br/>如果善良就是縱容你們這幫傻逼蚜厉，我愿意一輩子都歹毒下去。<br/>
</p>
</section>
編輯結束后畜眨，我們將顯示的內容復制到微信編輯器中昼牛，預覽一下术瓮，看看效果好不好，不滿意就做一下樣式微調贰健，手機預覽展示效果胞四，
好了，今天就先介紹到這里了伶椿，下次我們會再講一下有背景色的文章如何用CSS進行處理辜伟，敬請期待。
