例1.1 如何利用firebug的html灵活视察web页面中的html元素
实例: 见过ipod的官方网站的菜单栏吗? 应该说这个菜单栏做的是相当时髦漂亮的,现在我们就采用firebug去检查这个菜单栏是如何创建起来的,您会发现利用firebug是检查这些html代码是如此的轻松方便。
操作步骤:
- 在Firefox中打开ipod官方网站。
- 点击firebug控制台面板工具栏上的‘查看’按钮。
- 将光标移动到ipod网页的菜单栏上。
- 点击你想查看的html元素(如下图所示)。
- 在我们例子中,我们选择了菜单中的第一个按钮,如上图我们可以看到相应的html元素<a>已经在html面板的源码视图中高亮显示。
- 接着我们点击id=globalheader的<div>元素。
- 点击鼠标右键,在弹出菜单中点击‘复制HTML’。
- 创建一个html文件,然后将刚才复制的内容copy到新建html文档的<body>内。
- 点击firebug中的css标签,然后选择和我们例子关联的那些css代码(“#globalheader” ,“html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input” )。
- 当然一个个找比较麻烦,我们就索性把整个css文件copy过去,方法如下,选择nav.CSS,然后复制所有该文件内容(如下图)。
好了,接下来我们打开新建的那个html文件看看结果如何吧(代码下载参见底部 demo1.rar)。
- 大小: 115.4 KB
- 大小: 95.2 KB
- 大小: 49.9 KB
分享到:
相关推荐
firebug-2.0.16-fx
火狐插件 firebug-1.5.2-fx 虽然现在的是1.5.3版本 但是 firebug-1.5.2-fx 也算是经典版本了哦
firebug-1.11.2-fx.xpi一个不错的资源
firebug-2.0.19-fx
firebug-1.10.6-fx.xpi
firebug-1.12.7-fx_82618
初识Firebug全文--Firebug的使用.mht初识Firebug全文--Firebug的使用.mht初识Firebug全文--Firebug的使用.mht初识Firebug全文--Firebug的使用.mht初识Firebug全文--Firebug的使用.mht初识Firebug全文--Firebug的使用...
firebug-1.9.0-
firebug-1.4.4-fx,jQuery的调试工具,firebug-1.4.4-fx,firebug-1.4.4-fx,firebug-1.4.4-fx,firebug-1.4.4-fx,firebug-1.4.4-fx
firebug1.12 firebug1.11 firebug1.10 firebug1.9 firebug1.8 firebug1.7
firebug-1.5.0-fx firebug-1.5.0-fxfirebug-1.5.0-fxfirebug-1.5.0-fxfirebug-1.5.0-fx
Firebug-yslow-培训讲稿 Firebug-yslow-培训讲稿
Firebug是firefox下的一个扩展,能够调试所有网站语言,如Html,Css等,但FireBug最吸引人的就是javascript调试功能,使用起来非常方便,而且在各种浏览器下都能使用(IE,Firefox,Opera, Safari)。除此之外,其他功能...
火狐插件firebug-2.0.16-fx,火狐插件,直接拖载进入火狐附加组件管理器即可
Firebug 为你的 Firefox 集成了浏览网页的同时随手可得的丰富开发工具。你可以对任何网页的 CSS、HTML 和 JavaScript 进行实时编辑、调试和监控。\n\n访问 Firebug 网站来查看文档、截屏以及讨论组(英语):...
firebug-2.0.16-fx.zip
firebug-1.3.3-fx.rar FireFox 调试工具,需要的下
在经过了12个alpha以及4个beta版本后,Firebug团队终于发布了Firebug 1.10正式版,兼容Firefox 13~16版本。
firebug插件 火狐浏览器最新版:http://download.csdn.net/detail/bingqilin88/6590763