使用Firefox+Firebug修改博客布局

世上有诸多博客主题,但却鲜有主题能够完全合乎心意,到手后一番修改是必不可少的,但是css的修改却着实费劲,特别是没有本地环境的话,一遍一遍地传ftp,Ctrl+F5刷新也挺烦的。这几天把博客评论插件换了,顺便修改了评论css,写篇文章充数吧。
1、Firefox下载就不说了,首先下载Firebug最新版,目前为1.21,下载地址
下载完成后打开自己博客,然后点击浏览器右下角的萤火虫图标,标签“网络”里面,启用“控制台”和“脚本”。

2、顺便说下,网络标签那里可以看到博客所加载的所有js、html、css、图片等东西,如果你感觉博客加载速度慢,找出是哪些东西加载时间最长,想办法精简下。

3、点击Firebug左上角“查看”按钮,这个东东很神奇,点击后你就能用鼠标选取页面中的块DIV元素。比我我现在想修改评论框的样式,鼠标指向评论时,这个DIV就被高亮了,点下左键。这时Firebug右边就显示出控制该DIV的所有css代码了。

4、这时就可以随心所欲修改代码了,放心,这样修改只是测试预览,并不会真正写进css文件里。比如说我现在修改了评论的边框大小,貌似还挺漂亮,呵呵。如果感觉修改的差不多了,就把这段代码复制替换到真正的css文件里,就可以真正生效了,是不是很方便,而且不影响别人阅读。

注意:这样修改出来的代码一般只保证在Firefox下正常显示,修改后应测试其他浏览器下表现。

13 Comments
  1. 2008.10.27 at 16:49 Notify

    沙发~~~很详细~~

  2. 2008.10.27 at 17:40 Notify

    小墨越玩越专业了

  3. 2008.10.27 at 18:36 Notify

    评论样式不断的在变化ing…不错

  4. 2008.10.27 at 23:47 Notify

    不错。。小墨很厉害,老时很佩服。

  5. 2008.10.28 at 09:44 Notify

    小墨,请教个问题:firebug 提示错误信息,怎么修复。例如
    uncaught exception: (¹Õ Location.toString öCP
    ³

  6. 2008.10.28 at 14:13 Notify

    @二手科学家: 这个偶也不是很清楚,建议到w3c检测看看,如果有什么错误会列出来的。

  7. 2008.10.28 at 14:55 Notify

    @小墨: 谢谢小墨

  8. 2008.10.28 at 23:53 Notify

    FF高级玩法啊:)

  9. 2008.10.29 at 23:47 Notify

    HOHO…学习下..

  10. 2008.10.30 at 14:26 Notify

    @fqch:
    @一亿度:
    @彩妆:
    @哇资讯博:
    @睡到自然醒blog:
    多谢支持,呵呵~~

  11. 2008.10.30 at 14:27 Notify

    @Yacca: 这东西看着几天就厌了~还是多换换有意思~

  12. 2008.11.10 at 01:21 Notify

    firebug.确实是firefox一个很好的插件,做网页必备武器。

  13. 2010.08.05 at 20:07 Notify

    正在用FF,却没有试过这个插件 ,赶紧试试。

在下边留言吧!