SupeSite首頁/資訊默認模板樣式解析

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

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

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

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

1、幻燈片（focus turn）

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

1)幻燈片外邊框及背景

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

#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 樣式表中對應的常見修改樣式有：

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

3)幻燈片頁碼

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

#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; }// 修改幻燈片未選中狀態下的頁碼字體顏色和背景色。

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

2、熱點內容（new news）

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

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

#new_news h3 { padding:8px 20px 4px; }// 標題“熱點內容”樣式控制。

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

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

3、最新資訊（hot news）

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

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

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

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

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

4、用戶面板（user login）

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

#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; }// “用戶面板”模塊標題樣式控制，比如要修改顏色和字體大小可在此加樣式控制。

.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、調查/公告（super notice）

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

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

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

.super_notice ul { padding:0 15px; }

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

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