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

This article shows you how to understand the page layout and planning in the Div+CSS layout, the content is concise and easy to understand, it will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Getting started with Div+CSS layout

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 steps of ◆ design * step is to conceive, once conceived, generally speaking, you need to use image processing software such as PhotoShop or FireWorks (hereinafter referred to as PS or FW) to simply construct the interface layout you need to make. Here is the interface layout diagram I have 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 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 structure of DIV 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 page layout and planning have been completed.

The above content is how to understand the page layout and planning in the Div+CSS layout. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

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.