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複製到你的網頁中，就能夠仔細的研究百度的菜單是如何實現的了，還能夠在瀏覽器中查看效果。