Tips: 使用 FireFox+FireBug 美化博客

  对上一篇文章我已经大概介绍过 FireFox 浏览器的 FireBug 扩展,它不仅仅能够帮助我们分析页面的加载过程,更重要的功能是帮助网页设计人员开发网页。

  因涉及的知识面很广,所以我只在这里跟大家说说,如何利用它来美化自己的博客模板 :)

 tips-firebug-01.gif tips-firebug-02.gif

  左图:是FireBug扩展查看页面HTML元素的截图,左侧为HTML代码,而右侧则是当前HTML标记的css属性。

  右图: 点击扩展界面左上角的查看按钮,我们的鼠标在浏览器上指向某一区块,那么左侧的HTML标记可自动定位到当前标记上。找到自己需要的区块,按下回车键(防止点击页面上的链接)右侧的css属性可切换到当前标记下。通过该功能我们可以快速找出自己想修改的HTML标记和css,方便修改。

tips-firebug-03.gif tips-firebug-04.gif

  左图:在HTML标记的css属性上,我们还可以点击相关的文字进行修改。比如我刚从是定位到博客标题的文字上,css属性列表中的 #header a {..,} 就是文字的属性了,其中已带color颜色属性为#000000黑色。点击颜色值将出现编辑框,我们可以在这里即时修改css属性并预览效果。

  右图:我们已经准确找到准确HTML标记的css属性,我们就可以参考css熟悉列表上的元素名称,对自己的模板css进行修改。

tips-firebug-05.gif tips-firebug-06.gif

  左图:切换到布局选项卡,我们还可以直观的看到当前HTML元素的大小和定位信息。

  右图:Yo2的博客可以进入管理后台-》私有模板-》编辑私有模板,修改模板的css文件。一般把自己需要修改的css写在文件的尾部。(如果你正在使用系统模板,请先私有化)

  以上是很简单的使用说明,至于如何写出自己需要的css效果请参考《CSS2 参考手册》 ,通过css可以不仅于修改文字的大小、颜色,还可以修改背景、定位、特效等等,你所能看到的一切 :) BTW:我无法提供HTML或CSS的教学指导,因日常工作量也蛮大的,还请体谅。我鼓励大家一起学习,互相帮助!

  • http://www.nowings.cn Nowings

    BTW:我无法提供HTML或CSS的教学指导,因日常工作量也蛮大的,还请体谅。我鼓励大家一起学习,互相帮助!

    加入幼兔1群即可。 群号 33385002

  • http://blog.makuz.info 全人无优

    [Comment ID #284968 Will Be Quoted Here]

    老翅开班主讲,嘿嘿,老大给点辛苦费就行了。讲义我来发,随便收点资料费。哈哈。这主意不错。

  • http://www.s-vanz.cn 梦印江南

    刚才因为显示效果不怎以样。所以我就删了那篇日志。想不到邮箱里提示你在里面留言了。
    有个问题。我用页面建的那个留言本没用。发表评论的每个栏目都没有。是怎么回事啊。都已经两天了。。

  • http://www.s-vanz.cn 梦印江南

    模板下载不了。。我不下了。。
    就请你帮忙了。

  • 梦印江南

    想问个问题。。我的博客呆在首页的时候,怎么每篇日志都不工整。而打开单篇时,就很工整了呢。。
    望你赐教。谢谢。。

  • oneoo

    [Comment ID #285077 Will Be Quoted Here]

    这是因为你开启了 Homepage Excerpts 插件导致的,我帮你关闭了该插件。 就正常了 :)

  • http://www.shichangzhi.cn

    感觉很乱啊。。

  • http://gunzonline.yo2.cn Qsar

    PAGEBAR的CSS能不能修改??
    我用的这个主题用PAGEBAR自带的STYLE.CSS没有效果,下面分页很难看;选择BUILDIN(Header)就成了之前使用的白色的那样,想弄成黑色的不知道改哪里的代码….. 8O

    • oneoo

      @Qsar 修改私有模板上的 style.css 文件最未处的 .pagebar 项目即可

  • http://blogtd.org 乖乖

    偶滴blog名字是:
    〈blog图党〉™
    不是 博客图党呀!
    赶快改!!!
    :x

  • http://arsun.yo2.cn 杀手爱喝牛奶

    :cry: 求助~可视化编辑菜单没了…

    • oneoo

      @杀手爱喝牛奶 你说的是什么编辑菜单 :?:

      如果是后台的模板编辑功能,请确认你正在使用私有模板

      • http://arsun.yo2.cn 杀手爱喝牛奶

        @oneoo 不是,就是日志和页面的编辑项,现在可视化编辑和代码是一样的了,没法直接改字体或插图片了

        • oneoo

          @杀手爱喝牛奶 在编辑页面,按 Ctrl+F5 刷新试试

  • Pingback: links for 2008-12-09 | 凤凰涅槃

  • http://canghaiyishusheng.yo2.cn hezudao201

    wlw到底支不支持在yo2上添加标签 :lol: