這一篇将根據我的部落格目前使用的SimpleMemory模版和自己的了解來分析下,CSS檔案的一些内容。如果不當,還請大家指正,因為我本身也不是很懂CSS,加上部落格園這個CSS檔案還挺大,内容挺多,搞錯了,還請大家了解。我自己都是改好後,上傳到部落格,看效果,不滿意再改。進入主題之前,先感謝部落格園團隊,sevennight,marvin,博皮小組以及@Newlife群-長沙老豬,以及其他部落格園關于樣式設計制作文章的作者,沒有一一列出,也記不清了。本文是在很多文章和現有部落格模版的基礎上,自己磕磕碰碰,總結下來的。
部落格園美化相關文章目錄:部落格園部落格美化相關文章目錄
這一篇将根據我的部落格目前使用的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 }
View Code
而主要的還是發表的文章的标題以及内容的格式,看下面:
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
.NET資料挖掘與機器學習,作者部落格:
http://www.cnblogs.com/asxinyu
E-mail:[email protected]