FAQ首页 > 模板风格 > SupeSite > 查看文章
收起边栏
大字 小字 收藏 复制URL










7.0
默认模板样式解析之头部篇(header)
2009-08-21┆45,373 Views┆77

我们以默认模板为例分析一下其模板样式,SupeSite 7.0 默认模板的样式表为 \templates\default\css\common.css,所以只需要修改该文件即可更改 default 模板样式。

注意:修改默认模板之前最好复制一份进行修改,保留默认的 default 目录,方便以后的产品升级。

一、头部(header)

SupeSite 7.0 默认模板头部涉及到的 CSS 样式有:#header、#nav

具体分析:

1、logo

logo 在 common.css 里面涉及的样式如下:

    CODE: [COPY]
  • #header { width:960px; height:65px; overflow:hidden; margin:10px auto; }</PRE><PRE>#header h2 img { width:135px; height:65px; }

// 修改 logo 的高宽只需修改上面两个样式里面的 width 和 height 即可。

2、主导航栏背景

主导航栏在 common.css 里面涉及的样式如下:

    CODE: [COPY]
  • .main_nav height:34pxoverflow:hiddenpadding-top:1pxbackground:#1A4963; color:#FFF; font-size:14px; }

// 修改主导航栏背景色只需要修改上述样式里面的 background:#1A4963 即可。

    CODE: [COPY]
  • .main_nav .current a background:url(../images/nav_current_bg.gifrepeat-xcolor:#295B72; font-weight:700; text-decoration:none!important; }

// 修改按钮选中状态的背景只需修改上述样式里面的 background:url(../images/nav_current_bg.gif) repeat-x ,将新作的 /images/nav_current_bg.gif 图片替换原来的,或者去掉背景图片改为背景色,比如将 background:url(../images/nav_current_bg.gif) repeat-x 改为类似这样 background:#FFFFFF 。

3、首页背景

分类在 common.css 里面涉及的样式如下:

    CODE: [COPY]
  • #nav { width:960px; overflow:hidden; margin:0 auto 10px; background:#D3EAF0; }

// 修改分类背景只需要修改上述样式中的 background:#D3EAF0 即可。

4、主导航栏字体

主导航栏字体在 common.css 里面涉及的样式如下:

    CODE: [COPY]
  • .main_nav ul li a float:leftdisplay:blockpadding:9px 15pxcolor:#FFF; }

// 导航菜单未选中状态下字体的颜色修改上述样式中的 color:#FFF 即可。

    CODE: [COPY]
  • .main_nav .current a background:url(../images/nav_current_bg.gifrepeat-xcolor:#295B72; font-weight:700; text-decoration:none!important; }

// 导航菜单选中状态下字体的颜色修改上述样式中的 color:#295B72 即可。

5、分类字体

分类字体在 common.css 里面涉及的样式如下:

    CODE: [COPY]
  • .order_nav li a margin-left:2pxcolor:#295B72; }

// 修改分类字体颜色只需要修改上述样式中的 color:#295B72 即可。

二、首页及资讯首页(index & news)http://faq.comsenz.com/viewnews-836

三、资讯分类及内容页面(category & viewnews)http://faq.comsenz.com/viewnews-837

四、论坛(bbs)http://faq.comsenz.com/viewnews-838

五、日志(uchblog)http://faq.comsenz.com/viewnews-839

六、相册(uchimage)http://faq.comsenz.com/viewnews-840

七、尾部(footer)http://faq.comsenz.com/viewnews-835


77

满意

不满意

本篇文章用到的Tags : header 模板 头部 样式

没找到您想要的答案吗?建议您到我们的讨论区发帖寻求大家和 Comsenz 工作人员的帮助。