原文鏈接：【詳細(xì)圖解】一步一步教你自定義博客園（cnblog）界面
寫在開頭
我之前在我的博客園沒怎么發(fā)東西，就是覺得博客園的Markdown不支持實(shí)時預(yù)覽，加上markdown顯示出來的效果，主頁皮膚效果總是覺得很奇怪不能讓我滿意。
但是我今天偶然發(fā)現(xiàn)，原來博客園是允許自定義樣式的，我覺得我之前傻了。這點(diǎn)特別好，可以避免自己的博客和別人的雷同，可以個性化自己的主頁，文章顯示效果也可以自己控制，好似一下又回到了做qq空間的年代
雖然博客園現(xiàn)在支持的模板已經(jīng)很多了，但是我們還是加入一些自己的元素讓自己的主頁更加生動符合自己的風(fēng)格。
設(shè)置自定義css的地方在：設(shè)置的頁面定制CSS代碼
對于基礎(chǔ)的好的人，當(dāng)然可以完全自己做一個皮膚出來，可以完全禁用默認(rèn)的CSS，對于我們實(shí)用注意者來說，還是“借鑒”比較好。
學(xué)CSS
你要學(xué)會定制，怎么的也要會一些基礎(chǔ)的CSS吧？咱不說精通，起碼什么background，font，border，margin之類的應(yīng)該知道怎么用，其他的可以邊看邊查。
一般來說都是去w3school把~一定要掌握個大概再繼續(xù)哦~~
http://www.w3school.com.cn/css/index.asp
選擇一個模板
我們在皮膚里先挑一個現(xiàn)成的模板開始我們的定制之旅，這里我選了SimpleMemory，我還是喜歡這種樸素的風(fēng)格。
這個模板本身就挺好看，不用定制也可以，但是我覺得它默認(rèn)有點(diǎn)過于“精致”，頁面只顯示65%，分明沒充分利用空間嘛。
查看元素
我們開始定制的第一步就是學(xué)會查看元素，基本Chrome和Firefox都可以用F12來方便查看頁面元素。
一般來說當(dāng)前CSS樣式可以直接顯示在右邊，并且是可以編輯的！
然后點(diǎn)這個按鈕
這個按鈕就是可以用鼠標(biāo)選擇頁面中的元素，然后下面會顯示對應(yīng)的元素。
好了，我們看到這里是
,它的樣式表也顯示在右邊了，我們可以看到果然，這里的width只有65%。
這里我覺得90%挺好的，可以看到，頁面直接根據(jù)我的修改變化了！
然后我覺得頂部也可以小一點(diǎn)，我把margin-top改成 20px;
好了這個整體我覺得不錯了，我想保存這個怎么辦呢？很容易，直接復(fù)制這個元素的CSS就行了。
然后粘貼到前面說的頁面定制CSS代碼的地方，其實(shí)你可以只用復(fù)制你修改的部分，其他的不用復(fù)制，但是為了方便，就這樣全復(fù)制過來也行。
然后保存，再回到自己的主頁看看，是不是變了?
這里我強(qiáng)烈建議大家開2個界面，一個是設(shè)置界面，一個是主頁界面，修改了一個元素就在設(shè)置界面里增加，防止忘記保存！！
更進(jìn)一步
標(biāo)題
我想讓標(biāo)題更大點(diǎn)
我覺得50px不錯
導(dǎo)航欄
導(dǎo)航欄也要大點(diǎn)，而且字有點(diǎn)偏下了，移動上來點(diǎn)，然后最好移動的時候變藍(lán)色
字體變大
移動變色
移動上點(diǎn)
好了，這里我們保存一下
奇怪，導(dǎo)航欄顏色怎么沒變化？？？
注意：這里不能直接復(fù)制a，如果你有點(diǎn)CSS基礎(chǔ)了應(yīng)該知道，這里的a是特指#navList下面的a，所以這里我們要在a前面加上#navList
我們再保存看看
是不是好已經(jīng)修改了？
側(cè)邊欄
側(cè)邊欄的標(biāo)題我覺得不好看 找到這個元素
知道是用的.catListTitle類，我就對它進(jìn)行大改
改完效果
修改內(nèi)容顯示和邊欄顯示
我想把這內(nèi)容和邊欄顯示換一下，
通過查看元素我們知道這兩部分分別為mainContent和sideBar
我把mainContent的float改成right
好了，看差不多了，這里感覺和邊欄有點(diǎn)近
我們把sidebar的float改成left
好了大功告成！大家可以去我的主頁看看：http://www.cnblogs.com/voidsky
剩下的，還有很多可以個性化的地方，由大家自己去發(fā)揮吧!!
對了，文章里面的標(biāo)題，h1，h2，p,img什么的也可以改哦~~大家自由發(fā)揮吧！只要在前面加上#cnblogs_post_body就行了（你們自己應(yīng)該也能找到）
作者：voidsky_很有趣兒
鏈接：http://www.itdecent.cn/p/23b2bfc9a90d
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
