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的教学指导,因日常工作量也蛮大的,还请体谅。我鼓励大家一起学习,互相帮助!