IT资讯 |  编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

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

作者:王金河  发布日期:2014-08-22 21:45:52
  • 收藏本文    我要投稿
  • Firebug是火狐浏览器Firefox的一个插件,专门为开发人员开发的。使用Firebug需要先在Firefox中安装这个插件,网上有很多教程,可以对照着安装一下。

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

    使用Firebug查看百度的菜单。

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

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

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

    \

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

    \

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

    \

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

    (1),根据子标签,逐渐向上找父标签,比如上面的【新闻】对应的父标签通ky"http://www.it165.net/qq/" target="_blank" class="keylink">qq0+NPQwODD+86qdGFitcRkaXax6sepo6zU2snP0ru8ts6qY2xhc3M9"nv"的div,通过页面中元素的背景色,可以判断元素是否被选中或者被包含在内,比如单击class="nv"的div时,菜单变为:

    \

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

    \

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

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

Tag标签:网页  
  • 专题推荐