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复制到你的网页中，就能够仔细的研究百度的菜单是如何实现的了，还能够在浏览器中查看效果。