Simple and easy to understand, the 7 layout forms of the DIV+CSS architecture website explain it in one sentence

The following are 7 layout forms of DIV CSS architecture websites that I have compiled for you. Interested students can take a look.

1. "T" structure layout form. The so-called "T" structure refers to the layout with a horizontal website logo advertising strip at the top of the page, the main menu on the left below, and the content on the right. The overall effect is similar to the English letter "T", so it is called a "T," shaped layout. This It is the most widely used layout method in web design. The advantage of this layout is that the page structure is clear and the priorities are clear. It is the easiest layout method for beginners to use. The disadvantage is that the rules are rigid and if you don’t pay attention to the details and colors, it will be very difficult. It is easy to make people look "boring"

2. "mouth" layout. This is a pictographic view, that is, there is usually an advertising banner on the top and bottom of the page, with the main menu on the left and friendly links on the right. The main content is in the middle. The advantage of this layout is that it makes full use of the layout and has a large amount of information. The disadvantage is that the page is crowded and not flexible enough

3. Symmetrical contrast layout. As the name suggests, adopt a left-right or top-bottom symmetrical layout, half deep The color is half light, generally used for design sites. The advantage is strong visual impact, but the disadvantage is that it is difficult to combine the two parts organically

4.POP layout. POP is quoted from the advertising term, which refers to the page The layout is like a promotional poster, with a beautiful picture as the design center of the page. It is often used in fashion sites. The advantages are obvious: beautiful and attractive. The disadvantage is that it is slow. As a layout, it is worth learning from.

5. National layout. National layout is also called homogeneous layout, which is the type of layout that some large websites like to use. The top is the title of the website and the banner advertisement, followed by the main content of the website, some on the left and right The main part of the small piece of content is the middle question, which is listed together with the left and right sides. At the bottom is some basic information, contact information, copyright statement, etc. of the website. This layout is usually used in the design of homepages. Its main advantage is that the page can accommodate a lot of content. , a large amount of information.

6. Title text layout. The top part of this layout is the title or advertisement, and the bottom is the text. Usually article pages or registration pages use this layout, which is characterized by simplicity Bright, with less disturbing information and more formal.

I compiled the above for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Details Interpretation of position positioning in page layout

Detailed introduction to CSS page layout techniques

Detailed explanation of CSS basic knowledge points

The above is the detailed content of Simple and easy to understand, the 7 layout forms of the DIV+CSS architecture website explain it in one sentence. For more information, please follow other related articles on the PHP Chinese website!