Use ie8 developer tools to analyze Web page layout instances

Analyzing the mtml structure and layout of an existing web page, css reference and tracking is a tedious task. Even a comprehensive and bulky dw is insufficient, even the author of the web page is dizzy. Today, we use a feature "Developer tool" provided by ie8 to analyze an existing webpage. It is very consistent with the way humans think about solving complex problems: top-down, module division, and layer-by-layer decomposition.

What are the tools used by Ie developers? The Internet has turned it into a hot topic: his predecessor is IE WebDeveloper, which has now been integrated into ie8. It allows you to directly browse, transmit, and update html dom in a browser window, you can analyze webpages in real time and display them as a tree style that allows you to view the table style, Javascript scripts, tables, and other web page elements. The software can also interactively highlight selected web page elements in the browser, so you can locate the code in the actual web page. View the style element and locate the div.

Now we choose to synchronize the home page of the website with crayons as the analysis object, just because it is suitable for size and has many layout elements.

Open the home page of the crayons synchronization website and press F12 to bring up the "Developer Tools". HTML is the default tab. Every time a new webpage is opened, the source code of the webpage is displayed in the form of a DOM tree. Click the + sign on the leftmost side to expand or contract the DOM element.

The following analysis only analyzes html elements from the perspective of webpage structure and layout. css corresponding to elements is not involved for the moment, because we can get a general idea of css rules from the appearance of html elements.

 

1. The webpage is divided into two parts: <div id = "wrapper"> and <div class = "footer-ctn">

 

650) this. width = 650; "title =" lbfx-1.jpg "src =" http://www.bkjia.com/uploads/allimg/131228/11230015b-0.jpg "/>

650) this. width = 650; "title =" lbfx-2.jpg "src =" http://www.bkjia.com/uploads/allimg/131228/11230044E-1.jpg "/>

 

2. <div id = "wrapper"> it is divided into three parts: Header, advertisement banner, and topic. <Div class = banner-shadow> only serves as an interval

 

650) this. width = 650; "title =" lbfx-3.jpg "src =" http://www.bkjia.com/uploads/allimg/131228/1123004X7-2.jpg "/>

650) this. width = 650; "title =" lbfx-4.jpg "src =" http://www.bkjia.com/uploads/allimg/131228/1123003P6-3.jpg "/>

 

3. the header <div class = "header-ctn"> block is placed with a bar background. The main content is in the <div id = "header"> block, contains the Website logo and registration logon form.

 

650) this. width = 650; "title =" lbfx-5.jpg "src =" http://www.bkjia.com/uploads/allimg/131228/1123002244-4.jpg "/>

 

650) this. width = 650; "title =" lbfx-6.jpg "src =" http://www.bkjia.com/uploads/allimg/131228/1123004526-5.jpg "/>

 

4. The <div class = "banner"> block of the advertisement contains a navigation bar background image, a link list, and a download link.

 

650) this. width = 650; "title =" lbfx-7.jpg "src =" http://www.bkjia.com/uploads/allimg/131228/11230014Z-6.jpg "/>

650) this. width = 650; "title =" lbfx-8.jpg "src =" http://www.bkjia.com/uploads/allimg/131228/11230061V-7.jpg "/>

 

5. <div class = "content clearfix">, contains three theme blocks: "brand" <div class = "content-item">, "mobile edition" <div class = "content-item">, and "Computer Board" <div class = "content-item">.

650) this. width = 650; "title =" lbfx-9.jpg "src =" http://www.bkjia.com/uploads/allimg/131228/1123005A0-8.jpg "/>

The "brand" theme block <div class = "content-item"> consists of four rounded corners in the green box div, blue <ul class = "phone-brand"> blocks constitute links of various brands: <li class = "phone-apple"> apple ,....

 

 

650) this. width = 650; "title =" lbfx-10.jpg "src =" http://www.bkjia.com/uploads/allimg/131228/11230043M-9.jpg "/>

650) this. width = 650; "title =" lbfx-11.jpg "src =" http://www.bkjia.com/uploads/allimg/131228/11230053J-10.jpg "/>

<Div class = "content-item"> similar to <div class = "content-item-last"> block functions.

 

6. The footer part contains website maps, copyrights, and links. It corresponds to three color blocks: green, blue, and red.

650) this. width = 650; "title =" lbfx-12.jpg "src =" http://www.bkjia.com/uploads/allimg/131228/11230021T-11.jpg "/>

650) this. width = 650; "title =" lbfx-13.jpg "src =" http://www.bkjia.com/uploads/allimg/131228/1123003300-12.jpg "/>

 

Through the above analysis, we have a clear overall grasp of the layout and structure of the webpage. At the same time, we have noticed that the web page has clear design ideas, good modularization, clear layers, and no redundant nonsense elements.) The analysis does not cause us any problems and is commendable.

 

This article from the "Liu gongwuyu" blog, please be sure to keep this source http://liuzhenyao.blog.51cto.com/7642920/1286610