一步一步教你自定義博客園(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 就行了（你們自己應該也能找到）

 

轉載自：

https://www.cnblogs.com/Renyi-Fan/p/9096215.html

參考於：

【詳細圖解】一步一步教你自定義博客園（cnblog）界面 - voidsky - 博客園
https://www.cnblogs.com/voidsky/p/5490220.html