Comprehensive analysis of float website construction station layout

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

The overall analysis Float website constructs the station layout, this is a website page layout attribute, if uses properly will bring the very good effect, almost all website layout can realize, has the patient interested friend to look together:

Float

Function: Sets the element to float around adjacent elements, such as text wrapping around the image that is floating.

Value: The desirable values include left, right, and none. Left indicates that the element floats to the right of other elements;

Move on the right; none means no float. None is the default value.

Often used to set

CSS style. Now the construction station mainly uses the DIV website layout, therefore often many layout applications are the CSS style which the setting. Today, to the cat weight loss NET homepage For example, with you to explain, first look at the layout of its homepage, the diagram is my analysis of the layout, so easy to watch.

　　

From this figure will be the main obvious signs out, here is mainly about the layout of 1~4, because the layout of the 1~4 contains all the layout of the home page, the others are found in this small miniature! The layout of the 1~4 can be simply expressed as ((1+2) +3) +4.

1. Where 1+2 refers to the layout of Div1 and div2, it should be understood that <div id= "1" ></div><div id= "2" ></div>;

2. Then the whole is "1+2": <div id= "1+2" ><div id= "1" ></div><div id= "2" ></div></div>;

3. Then layout (1+2) +3): <div id= "1+2" style= "Float:left" ></div><div id= "3" style= "Float:right" ></div So, it is to suspend the 1+2 to the left, 3 to the right;

4. The whole is "1+2+3": <div id= "1+2+3" ><div id= "1+2" style= "Float:left" ></div><div id= "3" style= " Float:right "></div></div>;

5. Then layout ((1+2) +3) +4:<div id= "1+2+3" style= "Float:left" ></div><div id= "4" style= "Float:right" ></ div>;

6. The whole is "1+2+3+4": <div id= "1+2+3+4" ><div id= "1+2+3" style= "Float:left" ></div><div id= "4" Style= "Float:right" ></div></div>, defined as DIV4 participating in other layouts of the site structure.

can format the layout of all night pages into such n small modules, and then list them sequentially, the entire layout. Detailed effect picture can go to the cat weight loss net to look at, the overall view is still very good layout! About float Website Construction Station layout is introduced here, which mainly used the float property, it seems to know more about the future of the building of the site is still very helpful oh!

The original article copyright owners www.i5768.com All, reproduced please specify the copyright, thank you for your cooperation!