CSS Div layout introductory tutorial_html/css_WEB-ITnose

In web page production, there are many terms, such as: CSS, HTML, DHTML, XHTML, etc. In the following article we will use some basic knowledge about HTML. Before you study this introductory tutorial, please make sure that you already have a certain basic knowledge of HTML. Let’s start using CSS DIV to design web page layout step by step.
The first step in all designs is to conceive. Once the conception is complete, generally speaking, you need to use photo processing software such as PhotoShop or FireWorks (hereinafter referred to as PS or FW) to simply draw out the interface layout to be produced. The following is The interface layout I conceived.

Next, we need to plan the layout of the page based on the conceptual diagram. After carefully analyzing the diagram, we can easily find that the picture is roughly divided into the following parts:
1. Top part , which also includes LOGO, MENU and a Banner picture;
2. The content part can be divided into sidebar and main content;
3. The bottom includes some copyright information.
With the above analysis, we can easily lay out our design layer as shown below:

Based on the above picture, I drew an actual page layout diagram , explain the nesting relationship of the layers, so that it will be easier to understand.

The DIV structure is as follows:
│body {}　/*This is an HTML element, I won’t explain the details*/
└# Container {}　/*Page layer container*/
├#Header {}　/*Page header*/
├#PageBody {}　/*Page body*/
│　├#Sidebar {}　/* Sidebar*/
│　└#MainBody {}　/*Main content*/
└#Footer {}　/*Bottom of the page*/

At this point, the page layout and planning have been completed, continue All we have to do next is start writing HTML code and CSS.