正在加载中

教你如何制作个性化的标题栏

转自玩转百度空间http://hi.baidu.com/space163
效果演示地址: http://hi.baidu.com/1077

演示图片:

编辑CSS自定义模板,

找到#m_blog div.tit 行,你会看到有三个#m_blog div.tit 行,

把前两个分别替换为

#m_blog div.tit{color:#8A3506;font-size:14px;font-weight:bold;background:url(http://rssimg.mail.qq.com/readpic?url=http://hiphotos.baidu.com/space163/pic/item/accc3dc75b69dddcd100603c.jpg) no-repeat top left;text-indent: 22px;height:70px;line-height:75px}

#m_blog div.tit a{color:#8A3506;font-size:14px;font-weight:bold;background:url(http://rssimg.mail.qq.com/readpic?url=http://hiphotos.baidu.com/space163/pic/item/accc3dc75b69dddcd100603c.jpg) no-repeat top left;text-indent: 22px;height:70px;line-height:75px}

其中http://rssimg.mail.qq.com/readpic?url=http://hiphotos.baidu.com/space163/pic/item/accc3dc75b69dddcd100603c.jpg 是你需要的标题背景,改成你想要的图片地址就好了。

text-indent: 22px是标题左边缩进值
height:70px 是背景所占用的高度,根据你的背景图片的高度设置
line-height:75px是上面空的高度

点击进入标题栏背景图片素材库

点击这里返回百度空间CSS制作目录


20 Responses to “教你如何制作个性化的标题栏”

  1. 青日 说:

    谢谢~很有用的~

  2. 禹绿 说:

    真是谢谢拉~

  3. qq910910 说:

    ^o^
    cool~~~~thanks~~~~

  4. chennan72002 说:

    做好了,只有背景,却没有标题???

  5. 真的有这么聪明的人啊~~~~~~~~~~~~~~~~~·

  6. ssmjgah 说:

    不错!``百度高手````

    有个小小的问题要请教``````

    有空来我那坐坐```

    相信你会发现问题所在处````````

  7. natesc 说:

    想做成我网站评论模板吗,读者打开任一网页都能看到你的广告牌,还不心动吗,快看看吧。绝不是广告,想做成这样的模板给我留言吧。我的网站地址http://hi.baidu.com/natesc

  8. JLAG 说:

    看的我都晕了 呵呵

Post a Comment