【轉帖】最淺顯易懂的百度空間CSS教程

雖然百度空間吧裡已經有很多高手總結出的這方面的教程，但是我覺得很多介紹都挺含糊的，至少我就碰到很多看不懂的地方，還需要自己一點一點去實驗摸索，所以我想把我總結出的一些心得也整理一下貢獻出來給大家看看，絕對淺顯易懂，傻瓜都能學會～～～

由於這裡的內容都是我在設定自己空間時的經驗，所以不是很完整，比如如何設定背景顏色或圖片我就沒有介紹到（因為我自己不喜歡背景有顏色或有圖片，所以沒有研究這個），以後慢慢研究出更多之後還會陸續更新的，希望大家不要嫌棄。

如何修改CSS檔案：

登入後進入設定－模板設定－自訂模板，這時就會跳出一個視窗，出現可編輯的CSS代碼檔案。但是，這並不是你自己當前使用的模板的代碼，而是一個百度預設範本的代碼，這個是無法選擇的，百度目前只能提供這一種模板供編輯。

如果你想在某個比較喜歡的模板的基礎上進行編輯，就需要先把這個模板的CSS代碼複製出來，然後把“自訂模板”裡出現的那個代碼完全替換掉，接下來就可以對想修改的部分進行編輯啦。

在編輯CSS檔案的視窗下方有四個選項：“儲存”“儲存並應用”“取消”“預覽”，一定要搞清楚這幾個選項的區別，在每次修改之後最好先點一下“預覽”看看有沒有錯誤，之後再“儲存”，最好不要在編輯狀態下直接點“儲存並應用”，而是先儲存，然後再次預覽確定每個頁面都沒問題之後再選擇“應用此模板”。

查看自己或別人CSS代碼的方法：

開啟你要看的那個空間，點右手鍵，菜單上會有一個選項“查看源檔案”，點這個後會彈出一個記事本檔案，在這個檔案中尋找“CSS”，直到出現這種格式的文字 “href="/msnib/css/item/ed14a84473384f82b2b7dcb2.css">”（以MSNIB的空間為例），然後COPY其中“/css/item/ed14a84473384f82b2b7dcb2.css”這一段放到地址欄裡空間網址的後邊，即“http://hi.baidu.com/msnib/css/item/ed14a84473384f82b2b7dcb2.css”，然後敲斷行符號，這時就會彈出來一個記事本檔案，這裡就是你要看的CSS代碼檔案。通常用這種方法看到的文字都是不分行的，比較混亂，這時可以把它COPY到WORD文檔裡，看起來就會比較有條理啦。

註：可以通過這種方法學習一些代碼的設定方式，或者挖到一些喜歡的資源，但最好不要全盤複製別人的勞動成果，自己動手設定出獨一無二的模板才更有樂趣啊～～～

CSS內容及幾個主要部分的設定方式

空間背景顏色/滑鼠設定地區

如果要設定特殊風格的滑鼠，需要在代碼檔案的第一行加上：
a:hover {cursor:url('http://imgcache.qq.com/qzone/space_item/orig/11/187.ani')}
body {cursor:url('http://imgcache.qq.com/qzone/space_item/orig/11/1547.ani')}{background-color:#FFFFFF}

第一行括弧內的連結是點到連結時的滑鼠狀態，第二行括弧內的連結是正常的滑鼠狀態，第二行後邊的background-color後邊的顏色代碼是指整個空間的背景顏色。六位顏色代碼可以在這裡找到。

如果不需要設定特殊滑鼠，那麼這一部分只保留“body {background-color:#顏色代碼}”就可以了。

空間名稱/標題圖片設定地區

#header{height:300px;background:url(……)}
這是空間標題列的主體部分，{}內的文字解釋如下：
“height”指標題列的高度，這個要與你放在標題列的圖片高度相同；後邊的括弧內是你要做標題的圖片的連結，寬度為1024px的圖片比較合適，圖片高度可以根據自己的喜好決定。

#header div.lc{}
#header div.rc{}
如果想在標題的左右兩邊放置不同的圖片，就在第一行的{}內加上左邊的圖片連結，格式為{background:url(……) no-repeat left}。第二行的{}內加上右邊圖片的連結，格式為{background:url(……) no-repeat right}。否則{}內留空就可以。

#header div.tit{top:30px;left:20px;line-height:22px;font-size:30px;font-family:隸書}
這裡要設定的是空間名稱的位置（top後邊的數字是文字離空間標題列上邊界的距離，left後邊的數字是離左邊界的距離）；大小（font-size後邊的數字）；字型（font-family後邊的文字）。

#header div.tit a.titlink{color:#......;text-decoration:none}
#header div.tit a.titlink:visited{color:#......;text-decoration:none}
這兩行應該是設定空間名稱文字的顏色，但是我搞不清楚2行有什麼區別，所以索性都設成一樣的好了。如果想要把文字設成設成黑體或底線，就把text-decoration:後邊的none相應地改成bold或underline。

#header div.desc{top:60px;left:20px;color:#......;font-size:13px}
這行是設定空間簡介（空間名稱下邊那行小標題）的位置、大小和字型的，設定方法同空間名稱的設定。

#tabline{top:415px;background-color:#......}
這個是指TAB功能表列（首頁/部落格/相簿/好友/設定那一行）下邊的分隔線的位置和顏色，top後邊的數字是指分割線離空間標題列上邊界的距離，這個數字要根據標題列的高度和菜單的位置（是與圖片重疊或位於圖片下方）來決定。

#tab{top:390px}
這個是指TAB功能表列的位置，top後邊的數字是指距空間標題列上邊界的距離。

#tab a.on,#tab a.on:link,#tab a.on:visited{margin-top:2px;line-height:20px;background-color:#......;color: #……;font-size:14px;font-weight:bold;}
這一行是指TAB菜單被選中後的狀態，文字的位置，文字後邊背景的顏色，文字顏色，字型大小等等。

#tab span{color:#F93A60;font-size:14px}
這個是指TAB菜單中間的分隔字元（就是那條豎線）的顏色和大小。

#tab a:link{color:#......;text-decoration:none;font-size:14px}
這一行是指TAB菜單未被選中時的狀態，文字顏色，其它定義，字型大小。

#tab2部分是TAB菜單下方的第二TAB功能表列（比如“設定”下方的“基本選項”“模板設定”這一欄）的設定，設定方法同上。

.stage{background-color:#......}
這個是空間內容地區（TAB功能表列以下直到空間底部）的背景顏色/圖片設定，不想設定也可以把{ }留空。

部落格文章標題/文字設定地區

#m_blog div.tit{font-size:14px;font-weight:bold;line-height:50px;text-indent:60px}
部落格文章標題列的設定，line-height後邊的數字是用來定義標題列高度的，text-indent後邊的數字是指標題文字向右縮排的距離，如不需要縮排可設為0。如果想在每篇文章的標題前加片，可以在{}內的結尾處加上“background:url(圖片連結) no-repeat”，然後按照加入的圖片尺寸相應調整標題列高度和文字縮排處的數值。QQ裡的那些可愛的動畫表情表徵圖都可以拿來用，另存後上傳到百度空間的相簿就可以啦。

#m_blog div.tit a{color:#......;font-size:14px;font-weight:bold}
部落格文章標題連結的狀態設定。

#m_blog div.tit a:visited{color:#047304}
部落格文章標題被選中後的狀態設定。

#m_blog div.date{margin:5px 0 8px 0;color:#666666;text-align:right}
部落格文章日期的設定，margin指距標題列的距離，text-align指日期的位置（居左居右或置中）。

#m_blog div.cnt{color:#666666;line-height:20px;font-size:14px}
部落格文章內容設定：文字顏色，行距，字型大小。

#m_blog div.more a{color:#047304;font-size:14px}
“閱讀全文”連結狀態設定。

#m_blog div.more a:visited{color:#047304}
部落格文章標題連結被選中後的的狀態設定。

#m_blog div.opt{color:#047304;font-size:12px}
文章操作區（如編輯、評論等）的設定。

#m_blog div.opt a{color:#047304;font-size:12px}
文章操作區連結狀態設定。

#m_blog div.opt a:visited{color:#047304}
文章操作區連結被選中後的狀態。

#m_blog div.line{margin-top:10px;line-height:60px;background:url(圖片連結) no-repeat center}
文章和文章之間的分隔線設定，margin-top指分隔線與上一篇文章之間的距離，line-height指分隔線地區的高度，結尾處可定義分隔線的位置（no-repeat center指不重複，置中，repeat-x指橫向重複）。

音樂播放器的設定

如果覺得空間預設的音樂播放器不好看，可以在空間最後加上這段代碼來改變播放器的大小和顏色：

#phx{FILTER:Alpha(Opacity=60,FinishOpacity=36,Style=0,StartX=20,StartY=40,FinishX=0,FinishY=0)gray();WIDTH: 225px;HEIGHT:45px} 這個是我的播放器代碼）

這段代碼有點複雜，撿能看懂的部分介紹一下吧，其他的還沒摸索出來呢：

Opacity=透明度，可以用0-100之間的數值，數值越低透明度越高；FinishOpacity=過度透明度，即邊緣的透明度（這個我還沒搞懂怎麼玩）；gray＝顏色/風格，可以設為預設、gray、xray、invert等，可以自己嘗試；WIDTH後邊的數字表示播放器的寬度，HEIGHT後邊的數字表示播放條的高度。

怎樣設定分隔線

文章和文章之間的：
#m_blog div.line{margin-top:10px;line-height:60px;background:url(圖片連結) no-repeat center}

文章評論之間的：
#in_comment div.line{margin-top:10px;line-height:50px;background:url(圖片連結) no-repeat center}

好友頁面的分隔線：
#m_friend div.line{margin-top:17px;line-height:17px;background:url(圖片連結) repeat-x}

相簿頁面的分隔線：
#m_albumlist div.line{margin-top:17px;line-height:17px;background:url(圖片連結) repeat-x}

如果想取消分隔線，把“background”往後的部分都刪掉就可以啦～～～

空間內各個模組邊框的設定方法

CSS代碼的第四個部分（以“.mod”打頭的部分） ，就是用來設定空間內各個模組狀態的。以前一直沒搞懂是什麼意思，今天終於搞明白啦，分別解釋如下：

Padding：幾乎在每一項的設定裡都會提到這個詞，它的意思是指定地區中文字或圖象與邊框的距離。

.modbox：這一行是用來設定每個模組內容的位置，以及模組的背景顏色，還有就是簡單的線條邊框，比如none（沒有邊框）dotted（點線邊框）dashed（破折線邊框）solid（直線邊框）double（雙線邊框）等。

比如我的設定：.modbox{padding:10px 10px 0 10px;border-left:1px solid #9FA6AE;border-right:1px solid #9FA6AE} 意思是，模組內上下左右的邊距分別為10px 10px 0 10px；左邊框為實線，寬度1px，顏色#9FA6AE；右邊框為左邊框為實線，寬度1px，顏色#9FA6AE。如果想設定模組背景，在括弧內加上“background-color:#六位顏色代碼”就可以啦～～～～

如果要設定複雜一些的邊框效果，就需要用到以下的部分了：

.modtl：模組上邊框左角設定
.modtc：模組上邊框中間部分設定
.modtr：模組上邊框右角設定
.modbl：模組下邊框左角設定
.modbc：模組下邊框中間部分設定
.modbr：模組下邊框右角設定
這部分的設定是可以使用圖案的，比如，我在左上邊框用了這個圖案，中間部分用，右邊用，全都設定好了以後就組合成一個完整的上邊框了。具體的設定是這樣的：
.modtl{background:url(http://hiphotos.baidu.com/grandma/pic/item/6e4c14d8609f513733fa1c8f.jpg) no-repeat top left}

用相同的方法依次設定下邊的就OK啦。

如果是自己會設計圖案就比較有趣啦，可以做出各種與眾不同的邊框來，像我這麼笨的就只會去網上找現成的 =_=|||

空間音樂播放器增加了新功能！！

再首頁音樂播放器那裡點“編輯”就可以看到，以前只能播放一首歌曲，現在可以添加5首歌曲的連結並迴圈播放啦，而且還可以選擇“是否顯示視頻框”。這個新功能可真不錯！！！