SupeSite資訊分類及內容默認模板樣式解析

網(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）

1、“你的位置”

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

.global_module3_caption { position:relative; height:31px; overflow:hidden; margin-bottom:10px; background:url(../images/global_caption3_bg.gif) repeat-x; line-height:31px; }// 常見修改有更換“你的位置”背景圖片 background:url(../images/global_caption3_bg.gif) repeat-x 。

a.btn_capiton_op { position:absolute; top:3px; right:10px; display:block; width:96px; height:24px; overflow:hidden; background:url(../images/more_op_bg.gif) no-repeat; color:#295B72; line-height:26px; text-indent:-9999px; }// “在線投稿”按鈕樣式控制，常見修改為更換按鈕背景圖片 /images/more_op_bg.gif 。

2、資訊分類/論壇資源/內容頁圖文資訊

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

.global_module { overflow:hidden; padding-bottom:10px; border:1px solid #D8D8D8; background:#F8F8F8; }// 資訊分類/論壇資源/內容頁圖文資訊模塊整體樣式控制，這句控制還包括資訊分類圖片模塊、最新評論模塊、首頁的資訊、論壇、日志、相冊等模塊，常見修改有修改邊框樣式 border:1px solid #D8D8D8 及背景色。

.global_module1_caption { height:31px; overflow:hidden; margin-bottom:10px; background:url(../images/global_caption1_bg.gif) repeat-x; color:#FFF; line-height:31px; }// 論壇資源/內容頁圖文資訊模塊標題樣式，這句同樣是首頁資訊/相冊/論壇/日志幾個模塊標題的樣式控制，常見修改有更換標題背景圖片 background:url(../images/global_caption1_bg.gif) repeat-x; 及更改標題字體顏色 color:#FFF 。

3、文章列表

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

.global_tx_list4 li { height:35px; overflow:hidden; background:url(../images/dashed_bg.gif) repeat-x 0 34px; line-height:35px; font-size:14px; }.global_tx_list4 li a { color:#369; }

// 資訊分類/論壇資源文章列表樣式控制，常見修改有更改文章下方的灰色虛線 background:url(../images/dashed_bg.gif) repeat-x 0 34px 及文章標題鏈接字體顏色 color:#369 。

.global_tx_list4 .box_r { padding-left:10px; color:#999; font-size:12px; }// 文章發布日期樣式控制，常見修改為更改日期字體顏色 color:#999 。

4、翻頁(pages)

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

.pages a, .pages strong { margin:0 1px; padding:2px 6px; border:1px solid #E4E4E4; color:#369; text-decoration:none!important; }// 翻頁頁碼邊框、字體樣式控制，常見修改有修改邊框樣式 border:1px solid #E4E4E4 及修改頁碼字體顏色。

.pages a:hover { border-color:#369; }

// 鼠標放到頁碼上時候邊框顏色

.pages strong { border-color:#369; background:#369; color:#FFF; }// 當前頁頁碼邊框、背景色及字體樣式，常見修改有更改邊框顏色 border-color:#369、修改背景色 background:#369 及更改字體顏色。

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