【詳細圖解】一步一步教你自定義博客園（cnblog）界面

寫在開頭

我以前在博客園沒怎麼發東西，就是以爲博客園的Markdown不支持實時預覽，加上markdown顯示出來的效果，主頁皮膚效果老是以爲很奇怪不能讓我滿意。

可是我今天偶然發現，原來博客園是容許自定義樣式的，我以爲我以前傻了。這點特別好，能夠避免本身的博客和別人的雷同，能夠個性化本身的主頁，文章顯示效果也能夠本身控制，好似一下又回到了作qq空間的年代

雖然博客園如今支持的模板已經不少了，可是咱們仍是加入一些本身的元素讓本身的主頁更加生動符合本身的風格。

設置自定義css的地方在：設置的頁面定製CSS代碼

對於基礎的好的人，固然能夠徹底本身作一個皮膚出來，能夠徹底禁用默認的CSS，對於咱們實用注意者來講，仍是「借鑑」比較好。

學CSS

你要學會定製，怎麼的也要會一些基礎的CSS吧？咱不說精通，起碼什麼background，font，border，margin之類的應該知道怎麼用，其餘的能夠邊看邊查。

通常來講都是去w3school把~必定要掌握個大概再繼續哦~~

http://www.w3school.com.cn/css/index.asp

選擇一個模板

咱們在皮膚裏先挑一個現成的模板開始咱們的定製之旅，這裏我選了SimpleMemory，我仍是喜歡這種樸素的風格。

這個模板自己就挺好看，不用定製也能夠，可是我以爲它默認有點過於「精緻」，頁面只顯示65%，分明沒充分利用空間嘛。

查看元素

咱們開始定製的第一步就是學會查看元素，基本Chrome和Firefox均可以用F12來方便查看頁面元素。

通常來講當前CSS樣式能夠直接顯示在右邊，而且是能夠編輯的！

而後點這個按鈕

這個按鈕就是能夠用鼠標選擇頁面中的元素，而後下面會顯示對應的元素。

好了，咱們看到這裏是<div id="home">,它的樣式表也顯示在右邊了，咱們能夠看到果真，這裏的width只有65%。

這裏我以爲90%挺好的，能夠看到，頁面直接根據個人修改變化了！

而後我以爲頂部也能夠小一點，我把margin-top改爲 20px;

好了這個總體我以爲不錯了，我想保存這個怎麼辦呢？很容易，直接複製這個元素的CSS就好了。

而後粘貼到前面說的頁面定製CSS代碼的地方，其實你能夠只用複製你修改的部分，其餘的不用複製，可是爲了方便，就這樣全複製過來也行。

而後保存，再回到本身的主頁看看，是否是變了?

這裏我強烈建議你們開2個界面，一個是設置界面，一個是主頁界面，修改了一個元素就在設置界面裏增長，防止忘記保存！！

更進一步

標題

我想讓標題更大點

我以爲50px不錯

導航欄

導航欄也要大點，並且字有點偏下了，移動上來點，而後最好移動的時候變藍色

字體變大

移動變色

移動上點

好了，這裏咱們保存一下

奇怪，導航欄顏色怎麼沒變化？？？

注意：這裏不能直接複製a，若是你有點CSS基礎了應該知道，這裏的a是特指#navList下面的a，因此這裏咱們要在a前面加上#navList

咱們再保存看看

是否是好已經修改了？

側邊欄

側邊欄的標題我以爲很差看 找到這個元素

知道是用的.catListTitle類，我就對它進行大改

改完效果

修改內容顯示和邊欄顯示

我想把這內容和邊欄顯示換一下，
經過查看元素咱們知道這兩部分分別爲mainContent和sideBar

我把mainContent的float改爲right

好了，看差很少了，這裏感受和邊欄有點近

咱們把sidebar的float改爲left

好了大功告成！

剩下的，還有不少能夠個性化的地方，由你們本身去發揮吧!!

對了，文章裏面的標題，h1，h2，p,img什麼的也能夠改哦~~你們自由發揮吧！只要在前面加上#cnblogs_post_body就好了（大家本身應該也能找到）