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; }// 调查/公告模块列表样式控制，这里一般没啥可修改的，默认即可。

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠