SupeSite首頁/資訊默認(rèn)模板樣式解析

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

注意：修改默認(rèn)模板之前最好復(fù)制一份進(jìn)行修改，保留默認(rèn)的 default 目錄，方便以后的產(chǎn)品升級。

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

二、首頁及資訊首頁（index & news）

1、幻燈片（focus turn）

SupeSite 7.0 首頁、資訊、論壇、日志、相冊的幻燈片都是相同的 CSS 樣式，所以此處介紹后其他頻道將不再贅述。

1)幻燈片外邊框及背景

其在 common.css 樣式表中對應(yīng)的常見修改樣式有：

#focus_turn { position:relative; height:315px; margin-bottom:10px; border:1px solid #D8D8D8; background:url(../images/focus_turn_bg.gif) repeat-x; }// 修改幻燈片外邊框的樣式，修改上述樣式代碼中的 border:1px solid #D8D8D8; 即可。

// 修改幻燈片背景，修改上述樣式代碼中的 background:url(../images/focus_turn_bg.gif) repeat-x; ，將新作的 /images/focus_turn_bg.gif 圖片替換原來的，或者去掉背景圖片改為背景色，比如將 background:url(../images/focus_turn_bg.gif) repeat-x; 改為類似這樣 background:#FFFFFF; 。

2)幻燈片圖片及邊框

其在 common.css 樣式表中對應(yīng)的常見修改樣式有：

#focus_pic li img { width:350px; height:260px; padding:1px; border:1px solid #D8D8D8; background:#FFF; }// 修改幻燈片圖片邊框的樣式，修改上述樣式代碼中的 border:1px solid #D8D8D8; 即可。

3)幻燈片頁碼

其在 common.css 樣式表中對應(yīng)的常見修改樣式有：

#focus_btn span { display:block; float:left; overflow:hidden; width:22px; height:22px; margin:0 0 0 -1px; border:1px solid #D8D8D8; text-align:center; font:14px Arial, Helvetica, sans-serif; font-weight:700; line-height:22px; cursor:pointer; }// 修改幻燈片頁碼字體，修改 font:14px Arial, Helvetica, sans-serif; font-weight:700; 即可。

// 修改幻燈片頁碼邊框，修改 border:1px solid #D8D8D8; 即可。

#focus_btn .normal { background:#FFF; color:#1A4963; }// 修改幻燈片未選中狀態(tài)下的頁碼字體顏色和背景色。

#focus_btn .current { background:#1A4963; color:#FFF; }// 修改幻燈片選中狀態(tài)下的頁碼字體顏色和背景色。

2、熱點(diǎn)內(nèi)容（new news）

其在 common.css 樣式表中對應(yīng)的常見修改樣式有：

#new_news { height:185px; overflow:hidden; border:1px solid #D8D8D8; background:#F8F8F8; }// 熱點(diǎn)內(nèi)容模塊高度、邊框及背景色樣式控制。

#new_news h3 { padding:8px 20px 4px; }// 標(biāo)題“熱點(diǎn)內(nèi)容”樣式控制。

#new_news li { height:25px; overflow:hidden; padding-left:12px; background:url(../images/icon_li.gif) no-repeat 0 11px; line-height:25px; }// 熱點(diǎn)內(nèi)容文章列表樣式控制，常見修改是替換文章列表左側(cè)的小紅點(diǎn)圖片，也就是 /images/icon_li.gif 。

#new_news .box_r { padding-left:10px; color:#999; }// 熱點(diǎn)內(nèi)容文章列表右側(cè)日期樣式控制，常見修改為更改日期字體顏色 color:#999 。

3、最新資訊（hot news）

其在 common.css 樣式表中對應(yīng)的常見修改樣式有：

#hot_news h3 { padding:8px 0 8px; font-size:16px; border-bottom:1px solid #D8D8D8; }// “最新資訊”標(biāo)題樣式控制，常見修改為修改“最新資訊”字體大小 font-size:16px ，標(biāo)題下邊框 border-bottom:1px solid #D8D8D8 。

.hot_news_list h4 { height:25px; overflow:hidden; line-height:15px; }

.hot_news_list h4 a { color:#EB1C26; }// 最新資訊文章列表標(biāo)題樣式控制，常見修改為修改標(biāo)題顏色 #EB1C26 。

.hot_news_list p { height:62px; overflow:hidden; color:#666; line-height:20px; }// 最新資訊文章內(nèi)容摘要樣式控制，常見修改為修改文章內(nèi)容摘要顏色 color:#666 。

4、用戶面板（user login）

其在 common.css 樣式表中對應(yīng)的常見修改樣式有：

#user_login_position { position:absolute; width:248px; height:156px; border:1px solid #D8D8D8; background:#F8F8F8; z-index:99px; }// 用戶面板模塊整體樣式控制，常見修改為模塊邊框 border:1px solid #D8D8D8; 的修改，背景色的修改 background:#F8F8F8 。

#user_login h3 { padding:8px 15px 10px; }// “用戶面板”模塊標(biāo)題樣式控制，比如要修改顏色和字體大小可在此加樣式控制。

.user_info dl { height:70px; overflow:hidden; margin-bottom:12px; border-bottom:1px dashed #D8D8D8; }// 用戶頭像這塊兒的樣式控制，常見的修改為更改用戶頭像下方的虛線樣式 border-bottom:1px dashed #D8D8D8 。

.user_info dl dt img { width:48px; height:48px; padding:1px; border:1px solid #D8D8D8; }// 用戶頭像樣式控制，常見修改為邊框顏色修改 border:1px solid #D8D8D8 。

.user_info .tx_blue { color:#369; text-decoration:underline; }// “我的個人主頁”樣式控制，常見修改為更改字體顏色 color:#369 。

.contribute_txt { float:left; padding-right:12px; background:url(../images/myspace_bg.gif) no-repeat 100% 5px; color:#F00; }// “投稿”處樣式控制，常見修改為替換背景圖片 background:url(../images/myspace_bg.gif) no-repeat 100% 5px; 及修改字體顏色 color:#F00 。

5、調(diào)查/公告（super notice）

其在 common.css 樣式表中對應(yīng)的常見修改樣式有：

.super_notice { height:110px; overflow:hidden; margin-bottom:10px; border:1px solid #D8D8D8; background:#F7FDFD; }// 調(diào)查/公告模塊整體樣式控制，常見修改為邊框樣式修改 border:1px solid #D8D8D8; 及背景色修改 background:#F7FDFD 。

.super_notice h3 { padding:8px 15px 4px; color:#EB1C26; }// 調(diào)查/公告模塊標(biāo)題樣式控制，常見修改為更改字體顏色 color:#EB1C26 。

.super_notice ul { padding:0 15px; }

.super_notice li { height:25px; overflow:hidden; line-height:25px; }// 調(diào)查/公告模塊列表樣式控制，這里一般沒啥可修改的，默認(rèn)即可。

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈