CSS系列(5)-如何使用Firebug查看网页的html和css

 

Firebug是火狐浏览器Firefox的一个插件，专门为开发人员开发的。使用Firebug需要先在Firefox中安装这个插件，网上有很多教程，可以对照着安装一下。

 

不同的火狐浏览器版本中的Firebug可能有些差别，不过大致相同。我使用的是火狐31.0版本。

 

使用Firebug查看百度的菜单。

 

1，百度首页改版了，变得更简洁了，通过百度首页，打开左上角【更多产品】中的【全部产品】

 

2，打开之后，可以看到百度的菜单如下图，

网址为：http://www.baidu.com/more/

 

3，按一下键盘上的F12，记住，F12是Firebug弹出来的快捷键，弹出来Firebug之后的窗口如下图，Firebug窗口的左侧是网页的源代码，右侧是样式。

 

4，Firebug最常用的就是【选择一个元素】按钮，就是上图中的那个【带箭头的方块】那个图标，单击一下这个图标，然后单击页面的某个元素，就可以在下面查看这个元素的具体源代码，如下图，查看【新闻】这个标签对应的源代码。

 

 

下面讲一下如何把百度这个菜单的源代码复制下来。

 

(1)，根据子标签，逐渐向上找父标签，比如上面的【新闻】对应的父标签为带有类名为tab的div标签，在上一级为class="nv"的div，通过页面中元素的背景色，可以判断元素是否被选中或者被包含在内，比如单击class="nv"的div时，菜单变为：

 

(2)基本可以确定，class="nv"的div就是整个菜单的源代码，因此，在这个div上右击，选择【复制外部HTML】，就可以把整个div的源代码复制下来了，如下图：

 

(3)复制过了html源代码，就需要找样式了，主要找标签、id、class这3大选择器对应的样式，这些样式就在Firebug窗口的右侧，比如类nv对应的样式就是 .nv后面的内容，把这些样式都复制下来。

(4) 最后，把这些Html和css复制到你的网页中，就可以仔细的研究百度的菜单是如何实现的了，还可以在浏览器中查看效果。