部落格園模板CSS修改心得及方法。

經過不斷改進，現在這個風格，個人感覺還是比較滿意的。

下面把心得和方法貼出來，供以後查看，或其他新手查看。（由於本人是第一次弄關於CSS的東西，所以肯定很粗淺，高手就僅當娛樂，或直接繞道吧。）

 

從整體結構層次上：

首先，部落格園有一套頂級的CSS樣式，

然後，選擇了一個模板的CSS樣式。這個模板繼承了部落格園的CSS樣式，然後重寫其中的一些類，達到模板的風格效果。

最後，在模板CSS樣式的基礎上，我們自己在重寫一些類，達到自己想要的效果。自己寫的代碼就貼在（通過CSS定製頁面風格）裡面。

跟C++裡面的繼承基本一樣。  自己樣式：模板樣式：頂級樣式。

 

從具體的實現上：

我們不需要去看頂級樣式，因為頂級基本是個白板，都會被模板覆蓋掉的。

直接去選一個模板，然後查看部落格源檔案，找到模板的CSS檔案地址，然後開啟，模板的實現都在這裡。我選的是http://www.cnblogs.com/Skins/LessIsMore/style.css

然後，看自己的介面，修改不滿意的地方。具體操作：先開啟源檔案，尋找到需要修改的地方，前面有個class="XXX"，其中的XXX就是需要修改的類名。然後自己重寫這個類即可。重寫方法,如：body{background-color:#F3F8FC;}為修改整體背景顏色。另外一個尋找類名的方法是看部落格園的文檔，：http://skintemplate.cnblogs.com/

重寫的內容，自己不會寫，沒太大關係，用最高效的複製粘貼大法。看別人誰的好看，或是自己其他地方的好看，直接開啟css檔案，查到該類實現的地方，然後複製過來，就可以。

 

下面是我自己寫的所有的代碼：

 /*整體背景*/body{background-color:#F3F8FC; }/*左邊連結風格*/.catListPostCategory ul li,.catListPostArchive ul li,.catListImageCategory ul li,.catListComment ul li,.catListView ul li,.catListFeedback ul li,.catListEssay ul li,.catListLink ul li,.newsItem ul li{ margin-top:1px; margin-left:3px;}.catListPostCategory ul a,.catListPostArchive ul a,.catListImageCategory ul a,.catListComment ul a,.catListView ul a,.catListFeedback ul a,.catListEssay ul a,.catListLink ul a,.newsItem a{ text-decoration:none;color:#3b5999;}.catListPostCategory ul a:hover,.catListPostArchive ul a:hover,.catListImageCategory ul a:hover,.catListComment ul a:hover,.catListView ul a:hover,.catListFeedback ul a:hover,.catListEssay ul a:hover,.catListLink ul a:hover,.newsItem a:hover{ text-decoration:underline;} /*導覽列*/#navigator{background:url(http://images.cnblogs.com/cnblogs_com/aoyihuashao/223549/r_navbg.gif) repeat-x;}/*左邊分類標題*/.catListTitle{background:url(http://images.cnblogs.com/cnblogs_com/aoyihuashao/223549/t_navbg1.gif) repeat-x; padding:2px 5px 1px 5px;}/*右邊本文標題背景*/.postTitle{background:url(http://images.cnblogs.com/cnblogs_com/aoyihuashao/223549/t_navbg1.gif) repeat-x;padding:2px 5px 1px 5px; margin-top:10px;}/*輸入框*/.input_my_zzk,.comment_textarea,.author,.url{background-color:#F3F8FC}/*按鈕*/.comment_btn,.btn_my_zzk{background:url(http://images.cnblogs.com/cnblogs_com/aoyihuashao/223549/t_navbg1.gif) repeat-x;}/*隱藏公告這兩個字*/.newsItem{padding-top:15px;padding-left:5px;padding-right:5px;}.newsItem .catListTitle{display:none;}/*右邊本文標題字*/.postTitle a{font-size:15px; font-weight:bold; text-decoration:none;}