Very beautiful div+css layout Introductory tutorial 1th/5 Page _ Experience Exchange

In web authoring, there are many terms, such as: CSS, HTML, DHTML, XHTML, and so on. In the following article we will use some basic knowledge of HTML, and before you learn this introductory tutorial, make sure you have a certain HTML base. Let's start by using DIV+CSS to design your Web page layout in one step.

All the design of the first step is the idea, well conceived, generally also need to use Photoshop or fireworks (hereinafter referred to as PS or FW) and other image processing software will need to make the interface layout simple structure, the following is my idea of the interface layout.

Below, we need to plan the layout of the page according to the idea map, carefully analyze the diagram, we can not find that the picture is broadly divided into the following parts:

1, the top part, which also includes a logo, menu and a picture of banner;
2, the content part can be divided into the side bar, the main content;
3, the bottom, including some copyright information.
With the above analysis, we can easily layout, we design layers such as:

On the basis of this, I draw an actual page layout diagram to illustrate the nesting relationships of layers, which makes it easier to understand them.

The div structure is as follows:
│body {}/* This is an HTML element, specifically I do not explain */
└ #Container {}/* page layer Container */
├ #Header {}/* Page header */
├ #PageBody {}/* page body */
│ ├ #Sidebar {}/* Sidebar sidebar */
│└ #MainBody {}/* Main content */
└ #Footer {}/* page bottom */

Now that the page layout and planning have been completed, the next thing we need to do is start writing HTML code and CSS.

