zoukankan      html  css  js  c++  java
  • 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复制到你的网页中,就可以仔细的研究百度的菜单是如何实现的了,还可以在浏览器中查看效果。

     

     

  • 相关阅读:
    常见搜索召回方式
    阿里Tree-based Deep Match(TDM) 学习笔记
    阻塞、非阻塞、同步、异步的理解
    最佳实践:深度学习用于自然语言处理(Deep Learning for NLP Best Practices)
    ELK日志分析工具
    mysql性能测试--sysbench实践
    mysql性能测试-tpcc
    mysql基础测试
    压力测试sysbench
    压力测试工具MySQL mysqlslap
  • 原文地址:https://www.cnblogs.com/workest/p/3928259.html
Copyright © 2011-2022 走看看