CSS Series (4)-How to use Firebug to view HTML and CSS for a Web page

Firebug is a plugin for Firefox Firefox, developed specifically for developers. Use Firebug need to install this plugin in Firefox first, there are many tutorials on the Web, you can install it.

There may be some differences between firebug in different versions of Firefox, but they are roughly the same. I'm using the Firefox 31.0 version.

Use Firebug to view Baidu's menu.

1, Baidu homepage revision, become more concise, through the Baidu home page, open the upper left corner "more Products" in the "All Products"

2, after opening, you can see the menu of Baidu, such as,

The website is: http://www.baidu.com/more/

3, click on the keyboard F12, remember, F12 is Firebug pop out of the shortcut keys, bounce out the firebug after the window, such as the left side of the Firebug window is the source code of the Web page, the right side is the style.

4,firebug most commonly used is the "Select an element" button, that is, the "box with arrows" that icon, click on the icon, and then click on an element of the page, you can view the specific source code of this element, for example, see the "News" tag corresponding to the source code.

Let's talk about how to copy the source code of the Baidu menu.

(1), according to the Sub-label, gradually look up the parent tag, such as the above "news" corresponding to the parent tag with the Class name tab DIV tag, in the upper level of class= "NV" Div, through the page elements of the background color, you can determine whether the element is selected or included, such as Click Class = "NV" Div, the menu changes to:

(2) Basic can be determined, class= "NV" DIV is the source code of the entire menu, so, in this div right-click, select "Copy external HTML", you can copy the entire Div source code, such as:

(3) copied over the HTML source code, you need to find the style, mainly to find the label, ID, class, the 3 large selector corresponding to the style, these styles are on the right side of the Firebug window, such as the class NV corresponding style is. NV After the content, the styles are copied down.

(4) Finally, the HTML and CSS copied to your page, you can carefully study how Baidu's menu is implemented, you can also view the effect in the browser.