SupeSite相冊(uchimage)默認(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)品升級(jí)。

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

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

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

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

五、日志（uchblog）http://www.veryhuo.com/a/view/8108.html

六、相冊（uchimage）

1、相冊首頁

1）最近更新（幻燈片）

整個(gè)“最近更新”模塊的邊框由 .global_module 樣式控制，這個(gè)參數(shù)控制很多模塊的邊框樣式，之前的文章里我們已經(jīng)做過分析了，所以此處不再贅述。

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

#image_focus_big img { width:350px; height:276px; }// 幻燈片大圖大小控制

#image_focus_small h3 { padding:8px 15px 12px;}// “最近更新”模塊標(biāo)題樣式控制，如需修改標(biāo)題字體可在此添加相應(yīng)樣式代碼。

.global_piclist li div { display:table-cell; *display:block; width:102px; height:104px; *height:102px; overflow:hidden; border:1px solid #E0E9F2; background:#FFF; text-align:center; vertical-align:middle; *font-size:85px; cursor:pointer; }// 幻燈片小圖外框樣式控制，常見修改有更改小圖邊框樣式 border:1px solid #E0E9F2，背景色 background:#FFF，以及字體大小 font-size:85px 。

.global_piclist li div img, .user_photolist dl dt div img { max-width:100px; max-height:100px; width:expression(this.width > 100 && this.width > this.height ? 100: true); height:expression(this.height > 100 ? 100: true); vertical-align:middle; }// 幻燈片小圖樣式控制，設(shè)定縮略圖最大寬度和高度都為 100px，如果圖片寬高大于這個(gè)數(shù)值則縮略到 100px，并且縮略圖居中顯示。

2）本月相冊達(dá)人

“本月相冊達(dá)人”模塊的邊框和標(biāo)題背景樣式均同首頁資訊模塊，所以此處不做贅述。

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

.image_user_list dl dt img { width:48px; height:48px; padding:1px; border:1px solid #D8D8D8; background:#FFF;}// 用戶頭像樣式控制，常見修改有更改用戶頭像邊框樣式 border:1px solid #D8D8D8 以及更改背景色 background:#FFF 。

.image_user_list dl a { color:#369; }// 相冊名稱字體顏色控制。

.image_user_list dl a { color:#369; }// 相冊所有者用戶名字體顏色控制。

3）精彩相冊

“精彩相冊”模塊的邊框和標(biāo)題背景樣式均同首頁資訊模塊，所以此處不做贅述。

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

.image_gallery_list dl { display:inline; float:left; width:284px; height:120px; overflow:hidden; margin:10px 0 10px 22px; background:url(../images/image_shadow_bg.gif) no-repeat; }// 單個(gè)相冊模塊樣式控制，常見修改有修改單個(gè)相冊的高寬，以及更換其背景圖片 /images/image_shadow_bg.gif 。

.image_gallery_list dl dt img { max-height:100px; max-width:100px; width:expression(this.width > 100 && this.height < this.width ? 100:true); height:expression(this.height > 100 ? 100:true); vertical-align:middle; }// 相冊封面圖片樣式控制，設(shè)定最大寬高都為 100px，超過則縮略到 100px，縱向居中顯示。

.image_gallery_list dd h6 a { color:#333!important; }// 相冊名稱字體顏色控制。

.image_gallery_list dl a { color:#369; }// 相冊所屬說明“XX 的相冊”字體顏色控制。

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