firebug指南（6）-HTML标签应用实例-HTML教程-爱易网页

日期：2014-05-17　浏览次数：20678 次

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

?例1.1 如何利用firebug的html灵活视察web页面中的html元素

实例：见过ipod的官方网站的菜单栏吗？应该说这个菜单栏做的是相当时髦漂亮的，现在我们就采用firebug去检查这个菜单栏是如何创建起来的，您会发现利用firebug是检查这些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）。

1 楼 lucky16 2010-04-17

站头排。呵呵。没想到第六部分就出来了！

2 楼传说の黄花菜 2010-04-18

哈哈这系列还有最后两篇也是整个的精髓就是如何调试JavaScript 最后我会把上篇post方式发送ajax详解的那个例子作为实例进行实战演练。。打算写完后发布到bbs频道上下礼拜应该能完成了。。。

3 楼 Black_Kite 2010-08-19

厉害厉害~~我觉得实际操作一下就是不错，前面的文章介绍了很多东西，但是我觉得一些还是很少用到，有了例子就是清楚呀，感谢楼主！！！

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。