SupeSite日志(uchblog)默認模板樣式解析

網(LieHuo.Net)教程 我們以默認模板為例分析一下其模板樣式，SupeSite 7.0 默認模板的樣式表為 emplatesdefaultcsscommon.css，所以只需要修改該文件即可更改 default 模板樣式。

注意：修改默認模板之前最好復制一份進行修改，保留默認的 default 目錄，方便以后的產品升級。

一、頭部（header）http://www.veryhuo.com/a/view/8104.html

二、首頁及資訊首頁（index & news）http://www.veryhuo.com/a/view/8105.html

三、資訊分類及內容頁面（category & viewnews）http://www.veryhuo.com/a/view/8106.html

四、論壇（bbs）http://www.veryhuo.com/a/view/8107.html

五、日志（uchblog）

1、日志首頁

日志首頁的幻燈片樣式同首頁幻燈片樣式，“最新日志”、“本周熱門日志”、“本周熱評日志”幾個模塊樣式同首頁資訊模塊，所以此處不再贅述。

1）圖片故事

在 common.css 樣式表中對應的常見修改樣式有：

#blog_pic_story { height:140px; overflow:hidden; border:1px solid #D8D8D8; background:#F8F8F8; }// “圖片故事”模塊樣式控制，常見修改有更改模塊邊框樣式 border:1px solid #D8D8D8 以及更改模塊背景色 background:#F8F8F8 。

#blog_pic_story h3 { padding:8px 20px 4px; }// “圖片故事”模塊標題樣式控制，如需更改標題顏色可在此添加對應的樣式代碼。

.globalnews_piclist img { display:block; width:100px; height:70px; padding:1px; border:1px solid #D8D8D8; }// “圖片故事”模塊圖片樣式控制，常見修改有更改圖片邊框樣式 border:1px solid #D8D8D8 。

2）最近更新

在 common.css 樣式表中對應的常見修改樣式有：

#blog_new { height:467px; border:1px solid #D8D8D8; background:#F8F8F8;}// “最近更新”模塊樣式控制，常見修改有更改模塊邊框樣式 border:1px solid #D8D8D8 以及更改模塊背景色 background:#F8F8F8 。

#blog_new h3 { padding:8px 20px 4px; }// “最近更新”模塊標題樣式控制，如需更改標題顏色可在此添加對應的樣式代碼。

.global_avatar_list li img { display:block; width:48px; height:48px; padding:1px; border:1px solid #D8D8D8; }// “最近更新”模塊用戶頭像樣式控制，常見修改有更改頭像邊框樣式 border:1px solid #D8D8D8 。

#blog_new ul.txt li { height:28px; overflow:hidden; font-size:14px; line-height:28px; }// “最近更新”模塊下方日志列表樣式，常見修改有更改字體大小 font-size:14px ，或者在此加入控制字體顏色的代碼來更改日志標題顏色。

3）日志之星

在 common.css 樣式表中對應的常見修改樣式有：

#blog_top { height:301px; border:1px solid #D8D8D8; background:#F7FDFD; color:#999; }// “日志之星”模塊樣式控制，常見修改有更改模塊邊框樣式 border:1px solid #D8D8D8 ，更改模塊背景色 background:#F7FDFD，以及更改模塊字體顏色 color:#999 。

#blog_top h3 { padding:8px 15px 10px; color:#EB1C26; }// “日志之星”模塊標題樣式控制，常見修改有更改標題顏色 color:#EB1C26 。

#blog_top dt img { display:block; width:48px; height:48px; padding:1px; border:1px solid #D8D8D8; }// “日志之星”模塊用戶頭像樣式控制，常見修改有更改頭像邊框樣式 border:1px solid #D8D8D8 。

#blog_top dd a { color:#369; }// “日志之星”模塊日志標題樣式控制，常見修改為更改標題顏色 color:#369 。

4）熱門空間

“熱門空間”的邊框和背景色、標題欄樣式同首頁資訊模塊，所以此處不再贅述。

用戶頭像樣式同上面介紹過的“最近更新”里面的用戶頭像樣式：.global_avatar_list li img

5）本月熱評/本月點擊排行

“本月熱評”、“本月點擊排行”兩個模塊的邊框、背景、標題樣式完全同首頁的“版塊帖子數排行”，所以此處不再贅述。

在 common.css 樣式表中對應的常見修改樣式有：

.global_tx_list6 { margin-bottom:10px; padding-bottom:0; background:url(../images/zebra_bg.gif) repeat 0 31px; }// “本月熱評”、“本月點擊排行”兩個模塊樣式控制，常見修改為更換背景圖片 /images/zebra_bg.gif 。

.global_tx_list6 ul { padding:0 15px 0 30px; background:url(../images/top10_bg.gif) no-repeat 15px 10px; }// “本月熱評”、“本月點擊排行”兩個模塊文章背景樣式控制，常見修改為更改背景圖片 /images/top10_bg.gif 。

.global_tx_list6 .box_r a { color:#999;}// “本月熱評”、“本月點擊排行”兩個模塊文章作者用戶名字體顏色控制。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈