Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what is the method of DIV page layout". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

DIV page layout and planning

These days, my friends often ask me questions about the layout of DIV+CSS. In web page making, there are many terms, such as CSS, HTML, DHTML, XHTML and so on. We will use some basic knowledge about HTML in the following article, but before you take this introductory tutorial, please make sure you already have a basic knowledge of HTML. Let's start using DIV+CSS step by step for web layout design.

All the design step is to conceive, once conceived, generally speaking, you also need to use PhotoShop or FireWorks (hereinafter referred to as PS or FW) and other image processing software to simply construct the layout of the interface you need to make. Here is the layout of the DIV page that I conceived.

Under ◆, we need to plan the layout of the page according to the idea map. After a careful analysis of the picture, we can easily find that the picture is roughly divided into the following parts:

1. The top part, which also includes LOGO, MENU and a Banner picture.

2. The content part can be divided into the side bar and the main content.

3. At the bottom, including some copyright information.

With the above analysis, we can easily lay out the layout. Our DIV page design layer is shown below:

Based on the image above, I drew an actual page layout diagram to illustrate the nesting relationship of the layers, which makes it easier to understand.

The ◆ DIV page structure is as follows:

│ body {} / * this is a HTML element, so I won't specify * /

└ # Container {} / * Page layer Container * /

├ # Header {} / * Page header * /

├ # PageBody {} / * Page body * /

│ ├ # Sidebar {} / * sidebar * /

│ └ # MainBody {} / * body content * /

└ # Footer {} / * bottom of the page * /

At this point, the layout and planning of the DIV page is complete, and the next thing we need to do is start writing HTML code and CSS.

This is the end of the content of "what is the method of DIV page layout". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.