百度空間模版制作——css代碼詳細介紹

1、百度空間模版制作css代碼詳細介紹首先你要知道這些代碼是干嘛的空間名稱和簡介區(qū)域 #header 主體部分空間頭部的整個標題部分 #header div.lc 主頁左上角背景圖片 #header div.rc 主頁右上角背景圖片 #header div.tit 空間名稱，即主標題，名字大小顏色 #header div.tit a.titlink 空間名稱鏈接，未被點擊 #header div.tit a.titlink:visited已被訪問過的鏈接 #header div.desc 空間簡介，即副標題，位置大小顏色 導航欄#tabline 菜單下方的橫線，即分隔符，用來與空間名稱分開 #ta

2、b 導航菜單欄主體頁面上方“主頁博客|相冊”欄背景圖片 #tab a.on,#tab a.on:link,#tab a.on:visited 選中狀態(tài)，即“導航欄鏈接”，大小顏色背景 #tab span 導航欄項與項之間的分割符“|” #tab a:link TAB“博客|相冊”欄鏈接顏色，未被點擊 #tab a:visited“博客|相冊”已被訪問過的鏈接 #tab2 (基本選項 | 模板設置 | 高級設置 | 訪問統(tǒng)計) 這行的菜單主體屬性 #tab2 span TAB選中狀態(tài) #tab2 a TAB未選中狀態(tài) #tab2 a:link #tab2 a:visited 已被訪問過的鏈接 內

3、容區(qū)域 .stage 頁面正文所有部分（導航欄以下） 其它區(qū)域（即訪問量等信息） #comm_info 主體部分“其它”中“已有 人次訪問本空間”顏色、位置 #comm_info div.line “已有 人次訪問本空間”下面粉紅色分割線相關設置 #comm_info a“其它”中“什么是RSS？”顏色 #comm_info a:hover懸停效果 #comm_info.mod區(qū)域標題 #m_comm_info.modbox其它區(qū)域模塊 #pvshow訪問量數(shù)字字體#m_comm_info div a百度logo 頁碼區(qū)域#page 主體 高度大小位置 #page span 當前頁碼（不可點擊

4、） #page a.pc 上一頁和下一頁 未被點擊 #page a.pc:visited 已被點擊 #page a.pi 頁碼（可點擊） #page a.pi:visited 已被訪問過的鏈接 模塊區(qū)域.mod 模塊標題，上下間距 .modhandlecursor:move .modth 模塊標題欄主體和正文之間的距離 .modhead 模塊標題區(qū)的位置 .modopt 模塊操作區(qū)（如寫新文章)間距 .modtit 模塊標題區(qū)（如文章列表、個人檔案）大小顏色 .modtitlink 模塊標題鏈接 .modact 操作文字鏈接“修改個人資料”鏈接右上角“編輯”等鏈接的相關大小顏色設置。 .mod

5、box 模塊內容區(qū)主背景顏色等 a.modact:link“修改個人資料”鏈接顏色 a.modactlink:visited 已被訪問過的鏈接 .modtl 模塊左上角遠郊邊沿圖片背景,第一列，空列 .modtc 模塊中上的背景圖片背景，第二、三列，個人檔案、修改個人資料 .modtr 模塊右上角背景圖片背景，第四列空列 .modbl 模塊左下角背景圖片背景 .modbc 模塊中下、最下端一條背景圖片背景 .modbr 模塊右下角背景圖片背景 文章區(qū)域 #m_blog div.tit 文章標題 #m_blog div.tit a 文章標題鏈接大小顏色未被點擊 #m_blog div.tit a

6、:visited 文章標題大小顏色已被訪問過的鏈接 #m_blog div.date 文章發(fā)表日期文字大小顏色 #m_blog t 文章內容大小顏色 #m_blog div.more “閱讀全文>>” #m_blog div.more a “閱讀全文>>”的大小顏色，未被點擊 #m_blog div.more a:visited “閱讀全文>>”的大小顏色已被訪問過的鏈接 #m_blog div.opt 文章操作區(qū)（如“編輯”等的顏色大?。?#m_blog div.opt a 文章操作鏈接大小顏色 #m_blog div.opt a:visited “編輯

7、刪除 評論(4) 瀏覽(21)”已被訪問過的鏈接 #m_blog div.line 分隔條的相關設置 #m_blog div.none 無文章提示信息，隱形設置，不需要改變 個人檔案區(qū)域 #mod_profile.modtit首頁個人檔案標題 #m_pro a 個人檔案中“查看詳細信息”的顏色，未被點擊 #m_pro a:hover懸停效果 #m_pro a:visited 個人檔案中“查看詳細信息”已被訪問過的鏈接 #m_pro div.image 個人檔案中個人頭像的顯示位置，分為“中，左，右center,left,right” #m_pro div.act 操作區(qū)個人介紹和頭像的間距 #

8、m_pro div.user 個人用戶名的大小顏色 #m_pro div.desc 個人簡介的大小顏色 #m_pro div.line 分界線 #m_pro td #m_pro .photo照片的背景(此項以下不能預覽 #m_pro .photo td加為好友發(fā)送消息中間“|” #m_pro .photo .image #m_pro .photo .line頭像下劃線 #m_pro .ref #m_pro .ref .tit從“用戶名”到“圈子” #m_pro .ref .cnt #m_pro .basic td用戶名至查看該用戶在百度的等 #m_pro .basic .tit #m_pro

9、.basic a:hover男省份日期鏈接，鼠標懸浮在上的鏈接，未被點擊 #m_pro .basic a.nlk:hover“貼吧發(fā)言”“知道回答” #m_pro .pline中間分界線 #m_pro .pitem字體 高度 #m_pro .pitem .tit我曾就讀過的學校等 #m_pro .pitem a:hover鼠標懸浮在上的鏈接 相冊區(qū)域 #m_album div.image 相冊中照片的顯示位置，分為“中，左，右center,left,right” #m_album div.page “上一頁”>>“下一頁” #m_album div.page a “上一頁”的“下一

10、頁”未被點擊 #m_album div.page a:visited “上一頁”的“下一頁”已被訪問過的鏈接 #m_album div.image相冊預覽區(qū)域 #m_album a img圖片鏈接 #m_album a:hover img圖片懸停效果 #cbut相冊操作按鈕 #cbut a imgborder:0px;filter:alpha(enabled=0) 按鈕圖片 友情鏈接區(qū)域 #m_links div.item 子項友情鏈接中字體顏色大小 #m_links div.item a 名稱（鏈接）友情鏈接中字體的大小顏色，未被點擊 #m_links div.item a:visited

11、友情鏈接中字體的大小顏色，已被點擊 #m_links div.line 分界線 自定義模塊1-4 #m_mylink1-4 div.item“描述”的內容 #m_mylink1-4 div.item a標題鏈接名稱 #m_mylink1-4 div.item a:visited標題鏈接名稱已被訪問過的鏈接 #m_mylink1-4 div.line分割線 文章分類區(qū)域 #m_artclg div.item 子項文章分類中各分類后面主題數(shù)及括號的大小顏色 #m_artclg div.item a 分類名稱（鏈接）文章分類中各分類的大小顏色，未被點擊 #m_artclg div.item a:vi

12、sited 文章分類中各分類已被訪問過的鏈接 #m_artclg div.line 分界線文章分類中各分類之間的分隔符的相關設置 最新評論區(qū)域#m_comment div.item 子項最新評論中用戶名的大小顏色，未被點擊 #m_comment div.item a 最新評論中用戶名的大小顏色，未被點擊 #m_comment div.item a:visited 最新評論中用戶名的大小顏色，已被點擊 #m_comment div.item t 最新評論中評論文字的大小顏色，未被點擊 #m_comment div.item t:visited 最新評論中評論文字的大小顏色已被訪問過的鏈接 #m_

13、comment div.item t:hover 最新評論中評論文字鼠標懸浮在上的鏈接 #m_comment div.line 最新評論中各評論之間的分割線的相關設置 好友列表 #m_friend div.filter #m_friend div.catalog #m_friend a img好友頭像 #m_friend a:hover img懸停效果 #m_friend div.user #m_friend div.user a 好友名稱（鏈接），未被點擊 #m_friend div.user a:hover懸停效果 #m_friend div.user a img操作按鈕圖片 #m_fri

14、end div.user a:hover img操作按鈕圖片 #m_friend div.user a:visited 已被訪問過的鏈接 #m_friend div.line 分界線 設置訪問統(tǒng)計、模板設置 #m_setting a 鏈接color:#3399CC #m_setting a:hover懸停效果 #m_setting a:visited 顏色的設置，已被訪問過的鏈接 #m_setting 主體顏色的設置，已被點擊 #m_setting img.sel 模板預覽圖（選中狀態(tài)）border:4px solid #FFDB7B #m_setting img.unsel 模板預覽圖（未選

15、中狀態(tài)） #m_setting span.tit 模板標題名稱 #m_setting span.usr 作者名 #m_setting div.sel “當前模板”文字 #m_setting div.line 分界線 系統(tǒng)公告 #m_sysinfo a 鏈接 顏色的設置，未被點擊 #m_sysinfo a:visited 顏色的設置，已被訪問過的鏈接 #m_sysinfo 主體 顏色大小 #m_sysinfo span.new 最新 顏色大小 #m_sysinfo span.date 發(fā)布時間顏色大小 基本選項 #m_setbase 主體顏色大小 #m_setbase td 顏色大小 #m_se

16、tbase div.line 分界線 #spSpaceName空間名稱 #spSpaceDescri空間簡介 #spConfigDispNum每頁顯示文章 #spConfigDispMod文章顯示 #spDateMod時間格式 #btn_submit保存選項按鈕 網(wǎng)友評論 #in_comment 主體寬度 #in_comment div.tit 標題顏色大小等設置 #in_comment div.user 發(fā)表人名、序號、-線顏色大小等設置 #in_comment div.user a 發(fā)表人名（鏈接）未被點擊的顏色大小 #in_comment div.user a:visited 已被訪問過

17、的鏈接 #in_comment div.user span.date 發(fā)表時間顏色大小 #in_comment div.desc 評論內容顏色大小 #in_comment div.line 分隔符的設置 #in_send div.tit 發(fā)表評論（標題）的設置 文章存檔 #m_filed div.item 主題的顏色大小設置 #m_filed div.item a 未被點擊的顏色大小設置 #m_filed div.item a:visited 已被訪問過的鏈接 #m_filed div.line 分界線 最近訪客 #m_track a 訪客ID字體顏色大小 #m_track a:hover 鼠

18、標懸浮在ID上的鏈接 #m_track a img 訪客頭像的濾鏡效果，其他濾鏡效果 filter:invert , filter:xray #m_track a:hover img 鼠標在訪客頭像上的懸停效果 百度搜索 #m_search百度搜索區(qū)域 #m_search input.text “互聯(lián)網(wǎng)”等字體設置 #m_search input.radio “互聯(lián)網(wǎng)”等底色設置 #m_search input.submit “百度搜索”設置 #mod_search.modbackground:url() no-repeat 0% 0% 百度搜索標題 #m_search input.text輸

19、入框 #m_search label選框區(qū)域 #m_search input.radio選框前的圓圈 #m_search input.submit提交按鈕留言板 #mod_board.mod留言板模塊 #mod_board table.modth以下6項如不設定則繼承通用模塊的樣式 #mod_board td.modtl #mod_board div.modhead #mod_board span.modtit #mod_board td.modtc #mod_board td.modtr input.#spBCmtAuthor留言姓名輸入框 input.#spBCmtURL留言網(wǎng)址輸入框 #

20、spBCmtText留言輸入框 #vercode input驗證碼輸入框 #in_send td.f14 input留言按鈕 #in_msg div留言區(qū) #in_msg a留言區(qū)鏈接 #in_msg a:hover懸停效果 #in_msg div.tit網(wǎng)友留言標題 #in_msg table.item網(wǎng)友留言標題 #in_msg td.index留言序號 #in_msg div.user留言用戶 #in_msg div.user a img用戶頭像 #in_msg div.user a:hover img懸停效果 #in_msg t留言時間 #in_msg div.desc留言內容 #in

21、_msg div.line分界線 我的收藏 #m_cang div.item主體的顏色大小設置 #m_cang div.item a未被點擊的顏色大小設置 #m_cang div.item a:hover懸停效果 #m_cang div.item a:visited已被訪問過的鏈接 #m_cang div.line分界線 柱狀圖 .stat tdline-height:22px;color:#333333;font-size:14px/*累計訪問量等字體*/ .chartposition:relative;margin:10px 0 30px 31px;border:1px solid #B3

22、B3DC/*柱狀圖上左邊線*/ .chart div.bar,.chart div.barhlposition:absolute;background:#DCDCF4;border:1px solid #B3B3DC;line-height:0/*線柱顏色底邊顏色*/ .chart div.barhlbackground:#C2C2F4/*線柱懸停效果*/ .chart div.lineyposition:absolute;border-top:1px dotted #B9B9B9;line-height:0/*分隔線*/ .chart div.titx,.chart div.titxhl,.

23、chart div.tityposition:absolute;color:#666;font-size:9px;font-family:Arial;text-align:center;white-space:nowrap/*坐標數(shù)字*/ .chart div.titxhlcolor:#FF0000/*月份起始字體顏色*/ .chart div.hitposition:absolute;z-index:1000;width:100px;color:#666;font-size:12px;font-family:Arial/*線柱懸停訪問統(tǒng)計數(shù)字效果*/ .chart div.titytext-

24、align:right .stattopfloat:left;margin-top:20px;margin-right:14px;padding:10px;width:199px!important;width:220px;border:1px solid #CDCDCD/*以下為分析設置*/ .stattopfloat:left;margin-top:20px;margin-right:14px;padding:10px;width:199px!important;width:220px;border:1px solid #CDCDCD .stattop .listmargin-top:6px .stattop .list tdheight:20px日歷 #mod_cals .modbox日歷模塊 #cals日歷主體背景、邊框 #mod_cals .modbox td 字體顏色設置 #m_cals設置模塊背景顏色 #m_cals div背景設置 #cals .cal_bod