How to lay out div+css web pages? div+css web page layout method

The content of this article is about how to lay out div css web pages? The div css web page layout method has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

div css layout is the latest web page layout concept, which is completely different from the old layout methods (such as table layout). First, use div tags to divide the content areas on the entire page, then use css for positioning, and finally add content to the corresponding areas. The layout of div css is very simple and relatively easy to operate. The following is an introduction to the css div layout method.

1. Use div to divide the page.

Use div to divide the page. This is the first step to layout the website page. The next step can only be taken after the overall framework of the web page is determined. It mainly uses divs to divide each content area. Taking the simplest page frame as an example, the page generally consists of several parts: banner, main content, menu main navigation, and the bottom of the page (footer is also called footnote). Each part consists of its own id to identify. As shown in the figure:

2. Design the position of each content block

After the page content is determined, you need to according to the content itself Consider the layout of the night shift, such as menu, double columns, left and right columns. Generally, small websites use two columns. Large websites and some portal websites mostly use three columns, left, middle and right. It is generally recommended to use two columns. After the content block is determined, you can use css to position it directly.

3. Use css to position

After determining the page frame, you can position the content blocks of each design with css, and then Make an overall plan for each block and add content at the end.

The typesetting is relatively simple, using two float positioning, five center alignments, and one clear float. Pictures are generally placed in the banner area, and links are placed in the navigation area. You can place a tags directly or ul tags, or h2 tags with a tags. The main content of the website is generally placed with links (ul or ol tags with a tags), pictures, and content summaries (p Tags apply a tag).

The above is how to layout the div css web page? A complete introduction to the div css web page layout method. If you want to know more about CSS3 tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of How to lay out div+css web pages? div+css web page layout method. For more information, please follow other related articles on the PHP Chinese website!