< reprint >div+css layout tutorial div+css common layout structure definition

When using the Div+css layout, you should first structure the content of the Web page, carefully analyze and plan your page structure, and you might get a few pieces like this:

Page-level containers, page headers, flags and site names, site navigation (main menu), master content, submenus, search boxes, footers (copyright and related legal notices).

You typically use DIV elements to define these structures, like this:

<div id= "Container" ></div> page layer Container

<div id= "header" ></div> page header

<div id= "Content" ></div> page body

<div id= "Globalnav" ></div> site Navigation

<div id= "Subnav" ></div> Sub-menu

<div id= "Search" ></div> search box

<div id= "Footer" ></div> footer

This is not a layout, it is a structure. This is a semantic description of the content block. When you understand your structure, you can add the corresponding ID to the div.

A well-structured HTML page has almost no label that behaves as a property. The code is very clean and concise. For example, the original code <table width= "80%" cellpadding= "3" border= "2" align= "left", now can only write <table> in HTML; Everything that controls performance is written in CSS, and in structured HTML, table is the table, not anything else (such as being used for layout and positioning).

For example, a common site layout structure is listed:

The above is just the most basic structure, in practical applications, you can adjust the content block as needed. There are often div nesting cases, and you'll see that there are other layers in the "container" layer, similar in structure:

<div id="Container">

<div id="Header">

<div id="Logo"></div>

<div id="GlobalNav"><ul>a list</ul></div>

</div>

<div id="Content">

<div id="Content-Left"><ul>a list</ul></div>

<div id="Content-Main"></div>

</div>

<div id="Footer"></div>

</div> page layouts such as:

Nested div elements allow you to define more CSS rules to control performance, for example: You can give #container a rule to make the list right, and then give #globalnav a rule to leave the list to the left, and give the # Content-left a completely different expression.

< reprint >div+css layout tutorial div+css common layout structure definition