CSS layout tutorial template: Use DIV CSS to implement the classic three rows and two columns layout_html/css_WEB-ITnose

I have seen and encountered many corporate websites or other small display websites. They have some common characteristics, that is, a large navigation or BANNER is placed at the top, links or pictures are on the right, and content and pages are placed on the left. Place copyright information, etc. at the bottom. This form is a classic layout in China. We will not discuss its visual effects too much here. Today we will talk about how to use DIV CSS to implement a layout of three rows and two columns.

Let’s look at the picture below:

We are all familiar with this structure, how can we use DIV CSS to implement it. Let’s look at the analysis pictures below:

Their corresponding relationships are as follows:

Top: header

顶部：header
左侧：sidebar
右侧：containe
底部：footer
主要区域：main

Left: sidebar

Right: contain

Bottom: footer

Main area: main

What does this main do? Since the sidebar and container in the middle are two columns in parallel, we need to set up floats to keep them in place. But our entire page needs to be centered in the browser window. We can only set up a container main for them, and let sidebar and container float in this container. Don't worry about centering. Main plays the role of centering or setting the background.

The idea is very clear, we start to organize the HTML code:

    

    

;

;

div>

    

    

header , main, and footer are three relatively independent layers, while sidebar and container are sub-layers of the main layer. One thing needs to be explained here. We can write sidebar first or container first. Through floating settings, no matter which one is written at the front of the code, the effect will be the same. We can search by putting the content in front. The engine is more friendly, as follows:

* {
    margin:0;
    padding:0;
}

 

 

#header {
    width:776px;
    height:100px;
    margin:0 auto;
    background:#06f;
}

We start writing CSS and define the style sheet for each element above:

* { margin:0;
padding:0;

}

Overall layout declaration, margins and padding are zero.

#main {
    width:776px;
    margin:0 auto;
}

#header {

width:776px;
height:100px;

margin:0 auto;

#main #sidebar {
    width:200px;
    float:left;
    background:#f93;
}

background:#06f;
}

Definition of header: width is 776px; height is 100px; top and bottom margins are zero, left and right margins are The distance is automatic, achieving horizontal center alignment; the background color is blue #06f.

#main #containe {
    width:576px;
    float:right;
    background:#dceafc;
}

#main {
width:776px;

margin:0 auto;

}

Definition of main: width is 776px; top and bottom margins are zero, left and right margins are automatic, achieving horizontal center alignment; no background color and other settings.

#footer {
    width:776px;
    height:60px;
    margin:0 auto;
    background:#666;
}

#main #sidebar { width:200px; float:left; background:#f93 ; }

Define the main sub-layer sidebar: width is 200px; float to the left; background color is orange #f93.

#main #containe { width:576px; float:right; background:#dceafc ; }

Define the sub-layer container of main: the width is 576px (776-200); float to the right; the background color is very light blue #dceafc.

#footer { width:776px; height:60px; margin:0 auto; background:#666; }

The definition of footer: the width is the same as above, 776px; the height is 60px; the top and bottom margins are zero, the left and right margins are automatic, and horizontal center alignment is achieved; the background color is dark gray #666.

Maybe you think that our CSS definition of layout is over, but there are still problems. In order to facilitate preview, we set a height of 300px for sidebar and container and check the effect, as shown in the figure:

In IE, everything works as expected. It is displayed normally, but in FF, the footer layer disappears. This is because FF does not know what happens after floating, and does not know the height of main, so it runs to the top and we cannot see its existence. We remove the background color of the container, and what we see in FF is as shown below:

We should clear the float at the end of the sidebar and container to let FF know how to handle the footer layer, instead of placing it directly on top and visually disappearing. We add a new layer in HTML, located at the end of sidebar and contain:

    

    

    

 

 

#clearfloat {
    clear:both;
    height:1px;
    overflow:hidden;
    margin-top:-1px;
}

We define the style of clearfloat as:

#clearfloat {

clear:both;
height :1px;
overflow:hidden;
margin-top:-1px;
}

The meaning of the setting is: clear:both ; means that floating objects on the left and right are not allowed; the height is 1px; overflow is hidden; the top margin is -1px, that is, this layer is actually invisible and is only used to clear floats.

 

 

 

Title/* CSS Document */
* {
margin:0;
padding:0;
}
#header {
width :1002px;
height:100px;
margin:0 auto;
background:#06f;
}
#main {
width:1002px;
margin:0 auto ;
background: #dadada;
}
#main #sidebar {
margin:15px 5px 15px 10px;
width:600px;
height:500px;
float: left;
background:#f93;
}
#main #containe {
margin:15px 10px 15px 5px;
width:370px;
height:500px;
float :right;
background:#dceafc;
}
#footer {
width:1002px;
height:60px;

margin:0 auto;

background:#666 ;

}

#clearfloat {

clear:both;

height:1px;

overflow:hidden;

margin-top:-1px;
}

Okay, now there is basically no problem. The next step is to set up the menu on the page, add content and define the corresponding style.