病毒安全知识,电脑网络技术,手工杀毒方法,答疑解决笔记

导航

« position:absolute解决我的布局兼容问题世间已无乔布斯 »

设置Z-Blog网站Logo

  Logo不是banner,不是直接加在顶部的长条横幅图片,似乎有不少人想知道怎么在Z-Blog上添加logo,而默认主题上是没有这块的设置,使用其它zblog主题的话,可以直接去CSS样式表里找找看,或者直接去主题的文件夹里找有没有logo.gif、logo.jpg或logo.png等名字的图片,找个同样尺寸的图片替代进去就完成了,不过我下面说的是怎么在zblog默认主题或象我一样改造过的默认主题里增加logo图片。

  默认的zblog的样式表default.css里控制网站顶部的块是divtop,banner就是在这里,是它的背景图片(background-image),如果要叠加上一个logo图片,当然可以再加一个块或类(比如class="logo"),再设置背景图片为logo图片,不过那样的话,虽然从外观上没问题(我之前就这样设的),不过总是不甘心额外在网站顶部添加太多层次,而且如果用opera、chrome等带快速拨号的浏览器的话,不会自动显示logo作为网站缩略图,就象没有网站logo一样,直接选择网站全景截图,所以还是要改造一下。

  也许是在试用CSS sprites的过程中逐渐了解了background的用法,特别是对给<a>设背景图片使背景图片也一样带链接(扯远了),所以改造的做法很快就清晰起来:给divtop下的<a>标签设背景图片当作logo(当然如果可以,直接给divtop设背景是最好的,不过在zblog中divtop的背景已经让位给banner),给divtop下的h1标签或h1的class设背景也行,这就是我以前的做法,不会让浏览器认为是网站logo,所以还是给<a>标签设背景的好。如下,在zblog默认主题的default.css中增加(在主题文件夹里的style目录下,这个目录下还有一个default文件夹,可以用来放logo图片)

#divTop a{
background-image: url("default/logo.jpg");
background-repeat: no-repeat;
padding-left: 50px; }

当然也可以写成:

#divTop a{ background: url("default/logo.jpg") no-repeat;padding-left: 50px; } 

记得放上自己的logo图片,路径要写对,否则找不到,我这里的default/logo.jpg是放在主题所在文件夹里的style/default/中;最后一行的padding-left: 50px是控制文字位置的,不让文字部分与logo图片重叠,可以按不同网站的需要调整大小。

  完成后,不用重建文件就可以生效,因为只是改了zblog的css,用浏览器可以看到已经有logo的缩略图了。

网站logo的缩略图

而且logo也能点击,和网站名称一样的链接效果。 


>> 除非说明均为原创,如转载请注明来源于http://www.stormcn.cn/post/1112.html

发表评论(无须注册,所有评论在审核通过后显示):

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  • 微信订阅号
    微信订阅

最新发表

最新评论及回复

本站出现的所有广告均不代表本人及本站观点立场 | 关于我 | 网站地图 | 联系邮箱 | 返回顶部
Copyright 2008-2020 www.stormcn.cn. All Rights Reserved. Powered By Z-Blog. 闽ICP备09000343号

闽公网安备 35010202000133号