這一篇將根據我的部落格目前使用的SimpleMemory模版和自己的理解來分析下，CSS檔案的一些內容。如果不當，還請大家指正，因為我本身也不是很懂CSS，加上部落格園這個CSS檔案還挺大，內容挺多，搞錯了，還請大家理解。我自己都是改好後，上傳到部落格，看效果，不滿意再改。 

　　進入主題之前，先感謝部落格園團隊，sevennight，marvin，博皮小組以及@Newlife群-長沙老豬，以及其他部落格園關於樣式設計製作文章的作者，沒有一一列出，也記不清了。本文是在很多文章和現有部落格模版的基礎上，自己磕磕碰碰，總結下來的。 

1.公共的頁面頭部

1.1 部落格標題樣式

　　上面講到的其實只是一些常規的東西，希望對大家有幫助，但其實更核心的東西，還是如何定義部落格園樣式及其細節。其實我這裡說的自定義樣式，是針對你使用的模版來的，模版使用的css檔案可以通過網頁的原始碼找到連結，然後下載下來，針對性的修改。下面將通過本部落格的模版對應的css檔案對幾個重點位置的地方進行註釋和說明，其他可以下載我的資源裡面的檔案，自己研究。為了便於理解，直接對照程式碼和註釋來看吧：

 1 /*****home和頭部開始**************************/
 2 #home {
 3     margin: 0 auto;
 4     width: 72%;/*原始65*/
 5     min-width: 980px;/*頁面的最低寬度,也就是頁面頂部的寬度*/
 6     background-color: #fff;
 7     padding: 30px;
 8     margin-top: 50px;
 9     margin-bottom: 50px;
10     box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3)
 
;
11 }

　　上面就是頭部的主要樣式，以前我用的部落格模版，那個寬度非常寬，我不知道怎麼修改，直到用這個模版，根據原作者的CSS檔案和部落格園官方團隊的提示，才知道要在width這個地方修改。我稍微增加了一點，65%看起來是稍微窄了點，當然大家可以根據自己的需要來。

　　我們在上一篇的後臺設定中也提到了，可以設定部落格園的主標題和次標題文字，而文字的格式就可以在下面的程式碼中設定：

 1 /*部落格標題*/
 2 #blogTitle {
 3     height: 60px;  /*高度*/
 4     clear: both;
 5 }
 6     /*主標題格式*/
 

 7     #blogTitle h1 {
 8         font-size: 26px;
 9         font-weight: bold;
10         line-height: 1.8em;/*原始 1.6em*/
11         margin-top: 10px;/*原始 15px */
12     }
13 
14         #blogTitle h1 a {
15             color: #515151;
16         }
17             /*超連結顏色*/
18             #blogTitle h1 a:hover {
19                 color: #21759b;
20             }
21     /*次標題格式*/
22     #blogTitle h2 {
23         font-weight: normal;
24         font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/      
25         line-height: 1.8;
26         color: #757575;
27         float: left;        
28     }

　　上面的程式碼也很明顯，主標題和次標題是2個標題樣式，可以定義大小顏色，我都有一些改動，大家也可以對照現在頁面的頂部，字型稍微比原作者的要大了一些，大小了，感覺看起來難受。其實懂CSS，經常搞這個的人看定義也基本能看懂，我註釋是為了自己方便理解，畢竟不經常搞，萬一哪天要用，免得又去回憶和蒐集。當然還可以新增logo圖片，大家可以看看完整的CSS檔案以及我後面提供的Excel資料。

1.2 導航欄樣式

　　我在上一篇文章的2.4節頁尾Html程式碼中，提到過導航欄設定的程式碼，那一段程式碼是Js來修改部落格的欄目和連結，至於其他欄目我移到“公告”中去了，畢竟這個連結作用不大。下面這裡就要講解導航欄的格式，如何在CSS中設定。

 1 /*頭部導航欄*/
 2 #navigator {
 3     font-size:15px;
 4     border-bottom: 1px solid #ededed;
 5     border-top: 1px solid #ededed;
 6     height: 60px;/*導航欄高度，原始50*/
 7     clear: both;
 8     margin-top: 25px;
 9 }
10 /*導航欄設定,可以自定義導航欄的目錄*/
11 #navList {
12     min-height: 35px;
13     float: left;
14 }
15     #navList li {        /*每一個欄目節點*/
16         float: left;
17         margin: 0 5px 0 0; /*這裡原來是0 40px 0 0 */
18     }    
19     #navList a {         /*欄目文字的格式*/
20         display: block;
21         width: 5em;
22         height: 22px;
23         float: left;
24         text-align: center;
25         padding-top: 19px;
26     }

　　注意導航欄的欄目太多的話，欄目之間的間隔需要修改下，應該是li裡面的margin，我修改為5了，所以看起來比較擠一點，沒辦法欄目有點多，而且我還把字型及高度都修改了下。至於超連結的顏色和效果之類的，我都沒有改動，也不貼程式碼了。還有一個就是部落格統計，就是導航欄右邊的那個資訊，“隨筆-XX  文章-XX  評論-XX ” 的格式也可以設定。可以讓它的字型稍變小點，不要和導航欄的欄目字型一樣大：

1 /*部落格統計*/
2 .blogStats {
3     float: right;
4     font-size:13px;
5     color: #757575;
6     margin-top: 19px;
7     margin-right: 2px;
8     text-align: right;
9 }

2.首頁內容主體

　　部落格首頁的內容主體，主要就是部落格首頁的文章列表，包括置頂文章以及按時間順序排列的文章【如果不希望文章顯示在首頁，可以在文章編輯和發表的頁面進行設定】，如下圖：

　　而文章列表的標題，內容簡介以及尾部的發表備註資訊的格式都是可以設定的。有的部落格好像是按日期進行列舉，所以有下面這個東西，不過這個模版好像沒什麼用，也可以設定日期標題的格式。程式碼如下，進行了註釋：

 1 #mainContent {
 2     min-height: 200px;
 3     padding: 0px 0px 10px 0;
 4     padding-top: 10px;/*原始10*/
 5     -o-text-overflow: ellipsis;
 6     text-overflow: ellipsis;
 7     overflow: hidden;
 8     word-break: break-all;
 9     float: left;
10     margin-left: -22em;
11     width: 100%;
12     font-family:"微軟雅黑" , "宋體" , "黑體" ,Arial;/*比較鍾愛微軟雅黑*/
13     font-size: 14px;/*自己加的，不知道有衝突沒有？*/
14 }
15 .day {    /*每日文章列表*/
16     min-height: 10px;
17     _height: 10px;
18     margin-bottom: 20px;
19     padding-bottom: 5px;
20     position: relative;
21 }
22 /*日期標題，有的部落格按照日期進行排列*/
23 .dayTitle {   
24     display: none;
25     border: 1px solid #21759b;
26     background: azure;
27     border-radius: 50%;
28     font-size: 14px;
29     height: 65px;
30     line-height: 1.5;
31     margin: 15px;
32     text-align: center;
33     width: 63px;
34     margin-left: -100px;
35     clear: both;
36     position: absolute;
37     top: -15px;
38 }
39     .dayTitle a { /*日期標題的文字格式*/
40         display: inline-block;
41         color: #21759b;
42         margin-top: 15px;
43         width: 60px;
44     }

　　而主要的還是發表的文章的標題以及內容的格式，看下面：

 1 /*發表文章的標題*/
 2 .postTitle {
 3     border-left: 3px solid #21759b;
 4     margin-bottom: 10px;
 5     font-size: 20px;
 6     float: right;
 7     width: 100%;
 8     clear: both;
 9 }
10     .postTitle a:link, .postTitle a:visited, .postTitle a:active {
11         color: #21759b;
12         transition: all 0.4s linear 0s;
13     }
14 
15     .postTitle a:hover {
16         margin-left: 30px;
17         color: #0f3647;
18         text-decoration: none;
19     }
20     
21 /*文章內容（簡介內容）*/
22 .postCon {
23     float: right;
24     line-height: 1.5em;
25     width: 100%;
26     clear: both;
27     padding: 10px 0;
28 }
29 
30 .day .postTitle a {
31     padding-left: 10px;
32 }
33 
34 /*文章附加資訊*/
35 .postDesc {   
36     background: url(images/posted_time.png) no-repeat 0 1px;
37     color: #757575;
38     float: left;
39     width: 100%;
40     clear: both;
41     text-align: left;     
43     font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;
44     font-size: 13px;
45     padding-right: 20px;/*5px  padding-left: 90px;posted 發表時間左邊距離*/
46     margin-top: 20px;
47     line-height: 1.8;
48     padding-bottom: 35px;
49 }

這裡我主要是修改了一下字型，優先使用微軟雅黑，再就是對那個發表的時間，進行了移位，讓它靠近右邊一點。貌似沒什麼效果，不知道是不是沒改對地方？文章摘要內容的格式也比較簡單，我沒有做什麼修改。

3.公共側邊欄

　　公共側邊欄就是當前右邊這部分，包含的內容很多，也是按功能進行分塊，如公告欄，日曆，找找看搜尋框，谷歌站內搜尋等等。如下面是側邊欄的總體樣式，而對每個部分還可以單獨設定：

 1 /*****側邊欄開始********************************/
 2 #sideBar {
 3     margin-top: -15px;
 4     width: 250px;/*側邊欄寬度*/
 5     min-height: 200px;
 6     padding: 0px 0 0px 5px;
 7     float: right;
 8     -o-text-overflow: ellipsis;
 9     text-overflow: ellipsis;
10     overflow: hidden;
11     word-break: break-all;
12 }
13 
14     #sideBar a {
15         color: #757575;
16     }
17     }
18         #sideBar a:hover {
19             color: #21759b;
20             text-decoration: underline;
21         }

側邊欄的其他部分我沒有過多的設定，都是採用模版原始的，由於元件太多，大家可能很不清楚，如果想要詳細瞭解。可以看看下面這張表 元件和class,id的對照表。這個是貌似是部落格園官方測試頁面找到的，後面也提供一個下載。大家要對照相應的模組和標籤，去修改樣式。

對於那些不需要的模組，可以看前一篇的文章，關於後臺的設定，為了簡單，我就把很多部件給隱藏了。

4.檢視文章內容主體

　　單篇文章內容的主題也是另外一個比較重要的，和首頁的文章列表顯示稍微有些不同。文章內容主要分為 一級標題h1，二級標題h2，三級標題h3以及正文，圖片，表格等格式都是模版的格式，沒有變化。h1，h2的格式我是單獨採用以前的，也是從一個部落格園網友分享的程式碼裡面抄過來的，有1，2年了，也找不到原出處，在此表示感謝。下面貼出h1，h2的格式，這個格式我是直接放在 後臺設定的“ 頁面定製CSS程式碼”框中的，本來想和現在的模版CSS檔案合併，但技術太菜，合併之後總會有問題，所以也沒有去折騰。應該是會把模版的覆蓋掉。

 1 <style type="text/css">
 2     #cnblogs_post_body
 3     {
 4         color: black;      
 5         font: 0.875em/1.5em "微軟雅黑" , "PTSans" , "Arial" ,sans-serif;
 6         font-size: 16px;
 7     }
 8     #cnblogs_post_body h1    {
 9         background: #2B6695;
10         border-radius: 6px 6px 6px 6px;
11         box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
12         color: #FFFFFF;
13         font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;
14         font-size: 17px;
15         font-weight: bold;
16         height: 25px;
17         line-height: 25px;
18         margin: 18px 0 !important;
19         padding: 8px 0 5px 5px;
20         text-shadow: 2px 2px 3px #222222;
21     }
22  #cnblogs_post_body h2{
23         background: #2B6600;
24         border-radius: 6px 6px 6px 6px;
25         box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
26         color: #FFFFFF;
27         font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;
28         font-size: 13px;
29         font-weight: bold;
30         height: 24px;
31         line-height: 23px;
32         margin: 12px 0 !important;
33         padding: 5px 0 5px 10px;
34         text-shadow: 2px 2px 3px #222222;
35     }
36 </style>

　　這個樣式還是非常顯眼和漂亮的，大家可以用一下，設定合理的標題可以讓文章思路更加清晰，還可以為後面的生成文章目錄做準備。目錄就是提取這些h1,h2組合而成的。

5.資源

 　　其他的如評論框，評論按鈕，標籤的設定也都可以在CSS檔案中設定。在這裡提供我部落格的CSS檔案以及部落格園模版設計的一個Excel檔案給大家，希望能用得上。