The fifth chapter of the CSS book for everyone to read: site layout

1, the basic structure of the website

We simply divided the basic layout of the site into the following four kinds of ways:

The difference between the flow layout and the fixed layout is as follows:

• Flow: The width of the main content area is automatically wrapped as the browser window changes, unless the minimum width is reached
• Fixed: the page will be obscured as the window changes (e.g. Zoom out)

As an example of a three-column fixed layout, the basic HTML document structure is shown

2. Fixed layout of two columns

/*two column fixed layout*/Body{text-align:Center;/*This rule enables the layout to be centered in the IE6 browser window*/}#main_wrapper{width:840px;/*When this width changes, the width of the column will also change proportionally*/Margin-left:Auto;/*Center The layout in the browser*/Margin-right:Auto;text-align: Left;/*Resets the body tag to the hack set for IE6*/}#header{         }#nav{width:22%;/*Navigation width plus content width and exactly 100%*/float: Left;/*float to make navigation and content appear side-by*/}#content{float: Left;/*float to make navigation and content appear side-by*/width:78%;/*Navigation width plus content width and exactly 100%*/Top:0px; }#footer{Clear:both;/*Make sure the footer is below*/}#header_inner, #nav_inner, #content_inner, #promo_inner{Overflow:Hidden;/*crop (hide) oversized elements to prevent layout damage due to their expansion*/}#header_inner{padding:1em 2em;/*Create a gap between the box and the content*/}#nav_inner{padding:1em. 8em;/*Create a gap between the box and the content*/Border-right:3px Solid #B33; }#content_inner{padding:0 1em 1em 1.5em;/*Create a gap between the box and the content*/}#footer_inner{padding:. 5em 1em;/*Create a gap between the box and the content*/text-align:Center; }

3. Two-column mobile layout

/*two-column flow layout: Comments represent different content*/Body{text-align:Center; }#main_wrapper{/*set the flow range, if this range is exceeded, the fixed layout will be applied*/Max-width:960px;/*set the maximum flow width*/Min-width:720px;/*set the minimum flow width*/Margin-left:Auto;Margin-right:Auto;text-align: Left; }#header{         }#nav{width:140px;/*Keep the width of the navigation fixed so that it is not affected by window scaling*/float: Left; }#content{
/ * Default Auto Width * /
Margin-left:140px;/*the left margin of content equals the width of the nav column*/}#footer{Clear:both;background:#DDC; }#header_inner, #nav_inner, #content_inner, #promo_inner{Overflow:Hidden; }#header_inner{padding:1em 2em; }#nav_inner{Border-right:3px Solid #B33; }#content_inner{padding:1em 1em 1em 1.5em; }#footer_inner{padding:. 5em 1em;text-align:Center; }

4, three-column fixed layout

Body{margin:0px;padding:0px;text-align:Center;/*IE6 needs This and center the layout in the browser window*/}#main_wrapper{width:880px;/*sets Max layout width*/Margin-left:Auto;/*Centers layout in browser*/Margin-right:Auto;/*Centers layout in browser*/text-align: Left;/*resets the centering hack for IE6 on the body tag*/position:relative;Height:100%;Background-color:#585; }#header{/*Full width By default*/}#content{position:Absolute;padding:0;width:600px; Left:130px; }#nav{position:Absolute; Left:0px;width:130px;background:Transparent;Margin-bottom:300px; }#promo{position:Absolute; Right:0px;width:150px;background:Transparent; }#footer{/*Full width By default*/}#header_inner, #nav_inner, #content_inner, #promo_inner{Overflow:Hidden;/*prevents oversize elements from breaking the layout*/}#header_inner{padding:. 25em 2em; }#nav_inner{margin:1em 1.2em; }#content_inner{margin:1em 2.5em 1em 2em;padding:0; }#promo_inner{margin:1em 1.2em; }#footer_inner{padding:. 5em 10em;text-align:Center; }

5, three-column mobile layout

The difficulty of three-column flow layout is: To keep the middle content area changes, to ensure that the left and right side of the navigation is unchanged, for this, you need to add two div to achieve this function.

Here is the technique of using negative margins, for #twocolwrap设置了负外边距, to deceive the browser to the right of the space, so that can accommodate the right #promo column

/*three COLUMN LIQUID CENTER LAYOUT*/Body{Font:. 8em Verdana, Arial, Sans-serif;}* {margin:0;padding:0;}Div#main_wrapper{Min-width:760px;Max-width:880px;Margin-left:Auto;Margin-right:Auto;}/*Centers Layout when > Max width*/Div#header{width:Auto; }#threecolwrap{float: Left;width:100%; }#twocolwrap{float: Left;width:100%;Display:inline;/*stops IE doubling margin on float*/Margin-right:-170px;/*Cws-neg margin Move*/}#nav{float: Left;width:150px;Display:inline;/*stops IE doubling margin on float*/}#content{width:Auto;Margin-left:150px;Margin-right:170px;Height:1%; }#promo{float: Left;width:170px;Display:inline;/*stops IE doubling margin on float*/}#footer{width:100%;Clear:both; }/*end of structural styles*/ /*Inner div margin*/#header_inner, #nav_inner, #content_inner, #promo_inner{Overflow:Hidden;/*prevents oversize elements from breaking the layout*/}#header_inner{padding:1em 2em; }#nav_inner, #promo_inner{padding:. 5em. 5em 1em 1em; }#content_inner{padding:0 1em 1em 1.5em; }#footer_inner{padding:. 5em 10em;text-align:Center; }/*end Inner div margins*/

The fifth chapter of the CSS book for everyone to read: site layout