`
传说の黄花菜
  • 浏览: 202152 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

firebug指南（六）--HTML标签应用实例

FirebugHTMLCSSAjaxFirefox 
阅读更多



 例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
分享到：
| JVM内存管理与应用服务器的优化之SUN JVM ...
评论
4 楼 jankyzhang 2012-11-22  
好文章，谢谢！~
3 楼 Black_Kite 2010-08-19  
厉害厉害~~我觉得实际操作一下就是不错，前面的文章介绍了很多东西，但是我觉得一些还是很少用到，有了例子就是清楚呀，感谢楼主！！！
2 楼 传说の黄花菜 2010-04-18  
哈哈  这系列还有最后两篇 也是整个的精髓 就是如何调试JavaScript 最后 我会把 上篇post方式发送ajax详解的那个例子 作为实例  进行实战演练。。 打算写完后发布到bbs频道上 下礼拜应该能完成了。。。
1 楼 lucky16 2010-04-17  
站头排。呵呵。没想到第六部分就出来了！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    firebug1.12-firebug1.11-firebug1.10-firebug1.9-firebug1.8-firebug1.7

    Firebug是一款著名的Web开发工具，它为Firefox浏览器提供了一个集成的开发环境，允许开发者实时查看、编辑和调试HTML、CSS、JavaScript以及DOM等Web页面元素。这个压缩包包含了Firebug从1.7到1.12的不同版本，让我们...

    firebug-2.0.16-是firefox下的一个扩展,能够调试所有网站语言

    Firebug是firefox下的一个扩展,能够调试所有网站语言，如Html,Css等，但FireBug最吸引人的就是javascript调试功能，使用起来非常方便，而且在各种浏览器下都能使用（IE,Firefox,Opera, Safari）。除此之外，其他功能...

    firebug-2.0.16-fx

    6. **使用场景**：Firebug广泛应用于网页开发、前端性能优化、JavaScript库和框架的调试。它可以帮助开发者快速定位并解决问题，无论是简单的布局调整还是复杂的交互逻辑调试。 7. **替代品与发展**：随着浏览器...

    firebug-1.11.2-fx.xpi

    firebug-1.11.2-fx.xpi一个不错的资源

    firebug-2.0.19-fx

    firebug-2.0.19-fx

    firebug-1.5.2-fx

    《火狐经典插件Firebug 1.5.2-fx的深度解析》 在Web开发的世界里，Firefox浏览器的插件Firebug堪称神器之一，尤其是它的1.5.2-fx版本，虽然已被更新迭代的版本所取代，但其在开发者心中的地位仍然不可动摇。本文将...

    firebug-1.12.7-fx_82618

    4. 使用指南： 首先，确保使用的是Firefox浏览器。然后下载并安装"firebug-1.12.7-fx_82618.xpi"文件，安装完成后，在浏览器的工具栏上会看到Firebug的图标，点击即可开启或关闭工具。在网页上右键点击，选择“检查...

    firebug-1.10.6-fx.xpi

    firebug-1.10.6-fx.xpi

    firebug-2.0.16-fx.rar

    Selenium的一个重要特性是支持多种浏览器，包括Firefox，而Firebug作为Firefox的插件，能够与Selenium结合使用，提供更深入的页面元素定位和调试能力。 Firepath是Firebug的一个扩展，专门针对Selenium使用者设计。...

    初识Firebug全文--Firebug的使用.mht

    初识Firebug全文--Firebug的使用.mht初识Firebug全文--Firebug的使用.mht初识Firebug全文--Firebug的使用.mht初识Firebug全文--Firebug的使用.mht初识Firebug全文--Firebug的使用.mht初识Firebug全文--Firebug的使用...

    firebug-1.9.0-fx

    Firebug是Web开发领域的一款经典工具，特别是在JavaScript调试、网页元素检查、网络性能分析等方面具有重要作用。"firebug-1.9.0-fx"显然指的是Firebug的1.9.0版本，专用于Firefox浏览器（fx是Firefox的缩写）。这个...

    火狐hackbar插件firebug-2.0.19-fx和hackbar-1.6.3-fx

    老版本的firebug-2.0.19-fx和hackbar-1.6.3-fx支持老版的火狐浏览器

    firebug-1.4.4-fx

    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

    firebug-2.0.16-fx.zip

    标签"spring"可能有两层含义：一是与Spring框架有关，这是一个广泛使用的Java应用程序开发框架，尤其适用于构建企业级的Web应用；二是可能指的是季节或者时间点，但这与Firebug和Firefox的上下文不太相符，所以我们...

    火狐插件firebug-2.0.16-fx

    火狐插件Firebug是Web开发领域中一个重要的工具，特别是在前端开发中有着广泛的使用。它的版本2.0.16-fx专为火狐浏览器（Firefox）设计，提供了强大的调试功能，使得开发者能够深入地理解和调整网页的HTML、CSS以及...

    Firebug-yslow-培训讲稿

    Firebug-yslow-培训讲稿 Firebug-yslow-培训讲稿

    firebug-1.9.2-fx.xpi

    Firebug 为你的 Firefox 集成了浏览网页的同时随手可得的丰富开发工具。你可以对任何网页的 CSS、HTML 和 JavaScript 进行实时编辑、调试和监控。\n\n访问 Firebug 网站来查看文档、截屏以及讨论组（英语）：...

    firebug-1.3.3-fx最新版

    firebug-1.3.3-fx.rar FireFox 调试工具，需要的下

    firebug-1.10.1-fx.xpi

    在经过了12个alpha以及4个beta版本后，Firebug团队终于发布了Firebug 1.10正式版，兼容Firefox 13~16版本。

Magicbox
Global site tag (gtag.js) - Google Analytics