之前也有很多人寫過這個話題的博客了，但是我覺得大家都千篇一律——貼上一堆CSS的代碼，對於新手來說，可能直接拷貝過去CSS代碼,能改變下博客的樣式，但是知其然不知其所以然，想要自己修改樣式，仍然無從下手。
本篇就通過博客布局、CSS基本的方法、JQuery的使用、調試技巧、響應式布局擴展 等幾個方面講述下修改博客樣式的經驗。
博客布局
博客園的前端結構很規整，因此基本上所有的博客都是一樣的。大致可以如下面的Html結構所示：
<html>
<header>
1 默認的樣式文件
2 默認的JS文件，如Jquery
3 自定義的樣式
4 自定義的JS文件
</header>
<div id="home">
<div id="header">這是導航</div>
<div id="main">這是主題部分</div>
<div id="footer">這是底部</div>
</div>
</html>
通過上面的偽代碼，我們大概就就知道了，我們自定義的CSS可以覆蓋默認的CSS；html中的頁首代碼可以使用已經加載的JS文件——Jquery。
大致的結構如下圖所示：
按照這種方式，繼續研究前端的代碼，就可以發現下面這些明顯的部分：
導航的結構是這樣的：
正文部分是這樣的：
在博客園中【頁面定制CSS代碼】可以設置自定義的樣式，【頁首Html代碼】中可以放入<script>標簽進行JS的擴展。
CSS的基本方法
關於選擇器
在博客園中，大部分都是采用class或者id進行樣式設定，那么可以使用不同的選擇器選取目標元素設置其樣式：
- 如果頁面中某個元素有id屬性，那么可以通過#xxx {}設置其樣式；
- 如果有class屬性，可以通過.xxx {}設置樣式；
- 如果是特定的標簽，可以通過標簽名稱 a {}設置樣式；
一般來說，id用於特定的元素的樣式；而class則用於某一批元素的樣式。
另外，選擇器可以疊加使用，比如我想設置文章內容中的超鏈接樣式：
#main a{
//設置的樣式
}
#main a:hover{
//設置鼠標懸浮時的樣式
}
關於選擇器還有很多高級的內容，就不一一介紹了，上面的三種足夠調樣式了。
關於樣式的覆蓋
本來CSS中是有樣式的覆蓋的，感興趣的可以深入研究下，一般來說，只需要記住：
- 相同的樣式設定，下面的會覆蓋上面的
- 同一目標中，#會覆蓋標簽的，具體的他們都有分值來比較，感興趣的可以多研究下
關於定位
在CSS中有幾種常用的定位方法：
- position:absolute 這種定位方法是相對父級的定位，而改變效果的
- position:relative 這種定位是相對於它原本的位置定位。
- position:fixed 這種方式，是直接相對瀏覽器進行定位。
我的博客中，導航和左邊的sideBar都是fixed，這樣可以保證他們一直不動，個人是很喜歡這種風格的。
關於盒子模型
盒子模型的意思是每個元素都是由外邊距+邊框+內邊距組成的。外邊距可以通過margin設置，邊框可以通過border設置，內邊距可以通過padding設置，他們都可以細分為left、right、top、bottom四條邊，分別可以設置顏色、寬度、樣式等。
另外，需要注意邊框合並的問題，比如一個ul列表，如果給每個li都設置外邊距，其實相當於相鄰的li只有一份外邊距生效。
關於border-radius
調整樣式風格，這個屬性是必不可少的。它可以給方塊般的元素邊框設置圓角，詳細的可以參考用戶手冊
JQuery的使用
上面羅里吧嗦的說了一堆CSS的東西，要扯起來就太多東西要說了。下面簡單的說下JS的擴展...
由於我們的頁首代碼之前已經加載了JQuery文件，因此可以直接使用JQuery的語法。
那么使用JS都可以干嘛呢?
1 改變DOM元素
比如自定義導航：
var _navigator = $('#navList');
//_navigator.empty();
var html = "";
html += addNag("書單","http://www.cnblogs.com/xing901022/p/3694709.html");
html += addNag("Web","http://www.cnblogs.com/xing901022/p/4133587.html");
html += addNag("ELK","http://www.cnblogs.com/xing901022/p/4704319.html");
html += addNag("簡歷","http://www.cnblogs.com/xing901022/p/4422941.html");
_navigator.append(html);
function addNag(linkName,linkHref){
return "<li><a class=\"menu\" href=\""+linkHref+"\">"+linkName+"</li>";
}
簡單介紹下上面的代碼：
- $('#xxxid') 通過id獲得目標DOM元素
- xxx.empty() 清空內部的DOM元素
- xxx.append() 在內部追加DOM元素或者html
- 考慮到每次append都會造成頁面的刷新效率很低，這里先拼接完整的html字符串在append到目標元素上
2 自定義事件
比如，我的博客中，如果你點擊左邊最上面的隨筆分類，是有隱藏和顯示的效果的，偶爾會有BUG哦~刷新一下頁面就好了
var _menuBtn = $('#sidebar_postcategory h3');
_menuBtn.click(function(){
$("#sidebar_postcategory ul").toggle(300);
});
調試的技巧
按f12可以彈出控制台，我這里使用的是chrome瀏覽器。
另外，如果要設置元素的顏色，可以點擊元素所在的框框，可以在頁面中快速選取相應的顏色。
響應式布局擴展
現在的互聯網風格的博客都支持響應式布局，即可以根據瀏覽器窗口的大小改變內部的樣式，具體的是如何實現的呢？
其實很簡單：
@media screen and (max-width:800px){
body{}
#header {}
#main {}
#footer {}
}
當瀏覽器寬度小於800px的時候，就會自動使用這個大括號內的樣式。所以在這里調整樣式，就可以實現響應式的。
我的博客中，在只設置了這一種尺寸，而且刪除了很多不必要的元素、並且改變了按鈕的風格。
不過還是有點小瑕疵，在uc瀏覽器上試驗，感覺還是效果不太好，不過瀏覽器上看着還不錯。
山寨是最快捷的創造，因此找一個喜歡的網站，改成它的風格還是很有意思的，我這里參考的是這個網址~有興趣的可以參考下..