SupeSite7.0默认模板样式解析之相册篇
作者:wenxi 来源:admin5.co 时间:2009-09-07 16:48:00
我们以默认模板为例分析一下其模板样式,SupeSite 7.0 默认模板的样式表为 \templates\default\css\common.css,所以只需要修改该文件即可更改 default 模板样式。
注意:修改默认模板之前最好复制一份进行修改,保留默认的 default 目录,方便以后的产品升级。
1、相册首页
1)最近更新(幻灯片)
整个“最近更新”模块的边框由 .global_module 样式控制,这个参数控制很多模块的边框样式,之前的文章里我们已经做过分析了,所以此处不再赘述。
其在 common.css 样式表中对应的常见修改样式有:
#image_focus_big img { width:350px; height:276px; }
// 幻灯片大图大小控制
#image_focus_small h3 { padding:8px 15px 12px;}
// “最近更新”模块标题样式控制,如需修改标题字体可在此添加相应样式代码。
.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; }
// 幻灯片小图样式控制,设定缩略图最大宽度和高度都为 100px,如果图片宽高大于这个数值则缩略到 100px,并且缩略图居中显示。
2)本月相册达人
“本月相册达人”模块的边框和标题背景样式均同首页资讯模块,所以此处不做赘述。
其在 common.css 样式表中对应的常见修改样式有:
.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)精彩相册
“精彩相册”模块的边框和标题背景样式均同首页资讯模块,所以此处不做赘述。
其在 common.css 样式表中对应的常见修改样式有:
.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; }
// 单个相册模块样式控制,常见修改有修改单个相册的高宽,以及更换其背景图片 /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; }
// 相册封面图片样式控制,设定最大宽高都为 100px,超过则缩略到 100px,纵向居中显示。
.image_gallery_list dd h6 a { color:#333!important; }
// 相册名称字体颜色控制。
.image_gallery_list dl a { color:#369; }
// 相册所属说明“XX 的相册”字体颜色控制。
![](https://img.aspxhome.com/file/UploadPic/20099/7/20090907_eaa00447b2d4ce079901rbvcqhidvygs-92.jpg)
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
更换虚拟主机、IP对网站优化与排名的影响
图片格式问题和对性能产生的影响
做全不如做细,网站细分,如何细分?
终极防范上传漏洞
英文站: 高价关键词是一个新手话题
网站粘度从哪些方面考虑
谷歌推出搜索定制功能 或是众多网站失职
网络安全之小技巧保护(IIS)Web服务器
美国老鹰主机HawkHost购买图文教程
![](https://img.aspxhome.com/file/UploadPic/20103/19/20103199202533s.gif)
phpwind 关于版主推荐权限问题
Google Chrome OS操作系统试用
![](https://img.aspxhome.com/file/UploadPic/200911/23/20091123103312516s.jpg)
地方网站宣传经费开销一览
UC浏览器7.2版今日发布 支持Flash互动社交游戏
关于robots.txt无法禁止收录的小看法
![](https://img.aspxhome.com/file/UploadPic/201110/14/1318577612942-15s.jpg)
Godaddy更换IP后域名的设置 Godaddy
启用Mod Rewrite和.htaccess
CNNIC:域名转移不存在手续费
![](https://img.aspxhome.com/file/UploadPic/20084/23/2008423122311836s.jpg)
利用麦咖啡打造超安全的Web站点目录图文教程
![](https://img.aspxhome.com/file/UploadPic/20099/18/2009918202817648s.jpg)