What are the 8 common types of web page layouts?

There are 8 common types of web page layouts: 1. "国" layout; 2. Corner layout; 3. Title text layout; 4. Cover layout; 5. "T" structure layout; 6. "mouth" layout; 7. Symmetric contrast layout; 8. POP layout.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Most websites have different styles, but the layouts all have certain rules. There are eight common website layout forms, namely "国" layout, corner layout, and title text layout. , cover type layout, "T" structure layout, "mouth" type layout, symmetrical contrast layout, POP layout. Let’s introduce these eight common types of web page layouts to you one by one.

1. "国" font layout

This layout is common and common. Some large websites often use this type. Its characteristic is that it is standardized, and the content is from top to bottom. The top of the web page is the title banner and navigation bar, and the bottom is the relevant content information of the website, such as chinaren, 163, sina and other websites.

2. Corner layout

The characteristic of this layout is to put links to related content on the left or right side of the web page, and the other side is related text information. The top of the website is a title banner or Main content navigation bar, such as campus website, etc.

3. Title text layout

Its characteristic is the use of text for layout. In addition to the title, the following is the article. Some specialized articles, novel pages or registration pages belong to this type. .

4. Cover layout

Its characteristic is that the homepage of the website is composed of some exquisite and creative patterns combined with some small animations. On the page, there are no navigation bar instructions, just some Simple "enter" and other links, this kind of layout is generally used on design websites, such as design forums, design companies, personal websites, etc., because this kind of layout requires careful design and gives people a wonderful visual feeling.

5. "T" structure layout

The so-called "T" structure layout refers to the combination of the top and left sides of the web page. The top of the page is the horizontal website logo and advertising banner, and the bottom left is the main one. Menu, with content displayed on the right, is the most widely used layout method in web design. In actual design, the form of the "T" structure layout can also be changed.

For example, there is a two-column layout on the left and right, with half of it being text and the other half being visual images and navigation. Or the main text is arranged in two columns, distinguished by background color, and pictures and text are placed separately.

Such a layout has its inherent advantages. Because people’s attention is mainly in the lower right corner, most of the messages that companies want to publish to users can be obtained by users to the maximum extent possible, and it is very convenient. Secondly, The page structure is clear, the priorities are clear, and it is easy to use. The disadvantage is that the rules are rigid, and if you don't pay attention to the details and colors, it can easily become "boring".

6. "mouth" layout

This is a vivid way of saying that there is an advertising banner at the top and bottom of the page. The main menu is on the left, the links are on the right, and the main content is in the middle. .

The advantage of this layout is that the page is substantial, the content is rich, and the amount of information is large. It is a commonly used layout for comprehensive websites. What is special is that the row of small icons in the top center plays a role in activating the atmosphere.

The disadvantage is that the page is crowded and not flexible enough. There are also window-type designs that leave the four sides empty and only use the middle. For example, the NetEase wallpaper website uses a multi-frame format. Only the central part of the page can be scrolled, and the interface is similar to a game interface. Multi-dimensional gaming entertainment websites using this type of layout.

7. Symmetric contrast layout

As the name suggests, it refers to a symmetrical layout from left to right or up and down, half dark and half light, generally used for design websites. Its advantage is strong visual impact, but its disadvantage is that it is difficult to combine the two parts organically.

8. POP layout

POP comes from the advertising term, which means that the page layout is like a promotional poster, with a beautiful picture as the design center of the page. Often used in fashion websites, the advantages are obvious: beautiful and attractive, but the disadvantage is slow speed.

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of What are the 8 common types of web page layouts?. For more information, please follow other related articles on the PHP Chinese website!