首页 > 代码库 > CSS系列(4)-如何使用Firebug查看网页的html和css

CSS系列(4)-如何使用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复制到你的网页中,就可以仔细的研究百度的菜单是如何实现的了,还可以在浏览器中查看效果。