SupeSite头部(header)默认模板样式解析

发布时间:2020-11-05 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了SupeSite头部(header)默认模板样式解析编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

编程之家 jb51.cc 我们以默认模板为例分析一下其模板样式,SupeSite 7.0 默认模板的样式表为 emplatesdefaultcsscommon.css,所以只需要修改该文件即可更改 default 模板样式。

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

一、头部(header)

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

具体分析:

1、logo

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

#header { width:960px; height:65px; overflow:hidden; margin:10px auto; }复制内容到剪贴板Code:

#header h2 img { width:135px; height:65px; }// 修改 logo 的高宽只需修改上面两个样式里面的 width 和 height 即可。

2、主导航栏背景

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

.main_nav { height:34px; overflow:hidden; padding-top:1px; background:#1A4963; color:#FFF; font-size:14px; }// 修改主导航栏背景色只需要修改上述样式里面的 background:#1A4963 即可。

.main_nav .current a { background:url(../images/nav_current_bg.gif) repeat-x; color:#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 里面涉及的样式如下:

#nav { width:960px; overflow:hidden; margin:0 auto 10px; background:#D3EAF0; }// 修改分类背景只需要修改上述样式中的 background:#D3EAF0 即可。

本图已缩略,请查看图片属性并新窗口中打开!本图已缩略,请查看图片属性并新窗口中打开!三、资讯分类及内容页面(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)http://www.veryhuo.com/a/view/8109.html

七、尾部(footer)http://www.veryhuo.com/a/view/8110.html

总结

以上是编程之家为你收集整理的SupeSite头部(header)默认模板样式解析全部内容,希望文章能够帮你解决SupeSite头部(header)默认模板样式解析所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!