博客園美化相關文章目錄：博客園博客美化相關文章目錄
這一篇將根據我的博客目前使用的SimpleMemory模版和自己的理解來分析下，CSS文件的一些內容。如果不當，還請大家指正，因為我本身也不是很懂CSS，加上博客園這個CSS文件還挺大，內容挺多，搞錯了，還請大家理解。我自己都是改好后，上傳到博客，看效果，不滿意再改。
進入主題之前，先感謝博客園團隊，sevennight，marvin，博皮小組以及@Newlife群-長沙老豬，以及其他博客園關於樣式設計制作文章的作者，沒有一一列出，也記不清了。本文是在很多文章和現有博客模版的基礎上，自己磕磕碰碰，總結下來的。
本文原文地址：博客美化(2)自定義博客樣式細節
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文件給大家，希望能用得上。
本博客的CSS文件：bundle-SimpleMemory-A5.css
博客園模版設計Excel文檔：博客皮膚開發文檔.zip