`
传说の黄花菜
  • 浏览: 202814 次
  • 性别: 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  
站头排。呵呵。没想到第六部分就出来了！
发表评论

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

相关推荐

    firefox附加组件开发者指南

    从下一章开始，我们将深入探讨如何使用这些技术来构建具体的扩展实例，包括一个简单的“Hello World”扩展和一个实用的会话管理扩展。通过实际操作，你将能够更好地理解和掌握Firefox扩展开发的全过程。

    java常用网址,可能已经过期了

    - **知识点**：iReport是JasperReport的一个图形化设计器，本文提供了iReport的使用指南。 28. **新浪博客 - iReport 远程数据源配置** - [http://blog.sina.com.cn/s/blog_6055154501017bfs.html]...

    Javascript绝对简明手册.txt

    - **内联式**：在HTML标签中直接嵌入JavaScript代码。 - 示例：`(window.open());"&gt;Open&lt;/a&gt;`，点击链接时将打开一个新窗口。 - **外部引用**：通过`&lt;script&gt;`标签引入外部JavaScript文件。 - 示例：`...

    DWZ 富客户端框架使用手册.pdf

    1. **HTML扩展方式**：DWZ框架支持通过HTML标签扩展的方式调用框架内的组件，这种方式降低了JavaScript编程的门槛。 2. **基于jQuery的Ajax开发**：利用jQuery简化了Ajax开发过程，使得开发者无需深入了解复杂的Ajax...

    Ext Js权威指南(.zip.001

    3.1　使用firebug进行调试 / 62 3.2　在ie中调试 / 76 3.2.1　使用debugbar和companion.js调试 / 76 3.2.2　使用ietester测试 / 80 3.2.3　在ie 8或ie 9中调试 / 83 3.3　在chrome中调试 / 84 3.4　调试工具的总结 /...

    Ext Core手册word版

    使用Firebug等开发者工具，可以查看`Ext.Element`实例上的方法，以便更好地理解和利用这些功能。 总的来说，《Ext Core手册》是学习和使用Ext Core库的重要资源，它详细阐述了如何利用该库进行高效且兼容的前端开发...

    selenium-python.pdf

    #### 一、安装指南 **1.1 引言** Selenium Python bindings 提供了一个简洁的 API 来控制 Selenium WebDriver 的操作。WebDriver 是一个独立的应用程序，用于与浏览器交互，使得我们可以编写自动化测试脚本来模拟...

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