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

This article mainly introduces how to achieve a column layout of DIV+CSS, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

1. Page layout

Layout is the overall planning and arrangement of things. Page layout is the formatting and layout of the text, images or tables of the page. Page layout is very important to improve the appearance of the website, also known as layout layout, most websites will arrange the content into multiple columns, just like magazines or newspapers, the page layout design continues the characteristics of the traditional paper media, but it is more flexible than the traditional paper media, due to the limitation of paper size, the traditional paper media can only arrange the content in a limited space, while the layout of the web page layout You can adapt the width and height according to the content. In HTML, div elements are often used to create multiple columns, and CSS is used to float, locate, and so on, so as to render the layout style in the web design draft on the web page. Web page layout is the basis of web page production, which is usually used in three ways: streaming layout, that is, elements are arranged according to the standard document flow; floating layout and absolute positioning layout. In the major websites, the common layout structure is divided into one-column layout, two-column layout, three-column layout and mixed layout, of which the most commonly used is the mixed layout, that is, multi-column layout is used according to the actual needs of the website.

At present, most websites still use a general typesetting model, with headers, footers, sidebars and content areas, which constitute this straightforward layout. Just like the traditional newspaper and magazine editors, this is the expected web page layout, which can be roughly divided into: national font, that is, three-column layout, the most common layout structure. Title text type, that is, single-column layout, similar to the article page. The left and right frame type, that is, the two-column layout; the upper and lower frame type, which is similar to the two-column layout, but the upper and lower structure. Mixed type, that is, the combination of multi-column layout, many types of changes, a relatively complex frame structure, also known as integrated frame type. Cover type, often used on the front page of the website, most of them put a beautiful picture on the first screen, similar to the style of publicity posters, combined with some small animation effects, can be used for the display of products, will bring people a pleasant feeling.

With the emergence of new technologies of HTML5 and CSS3, as well as the rapid development of mobile devices, the Internet has undergone earth-shaking changes. Today, the layout no longer has to adhere to a fixed format. In recent years, the trend of web layout design is unconventional layout, they do not strictly follow certain criteria or established system. Visual interaction, such as full-screen layout, waterfall flow, seamless jigsaw puzzle layout, etc., are not limited to the traditional layout. For traditional websites, information websites mostly use single-column, two-column or three-column layout, as well as mixed layout structure. The layout structure of the page will directly affect the user experience of the page, such as the popular card web page design, which not only looks beautiful, but also has strong practicality, highly integrated information and content, but so simple and elegant. The popularity of card design is inseparable from responsive design. Responsive web design is not only to create a mobile site, but also to make the website suitable for a variety of browser sizes, whether it is PC, tablet or smartphone. The purpose of responsive design is to create a website that is beautiful regardless of size.

The following are some good web layout designs found when doing exercises: QQ Browser, 360browser, Xiaomi mobile phone display page, nutty mobile phone display page, flower petal network.

Compared with the layout structure of domestic websites, we should appreciate more foreign website designs.

2. One column layout

One column layout is mostly used for the front page of the site, such as 360 search, the structure of one column layout is simple and clear, the theme is prominent, suitable for arranging simple content, not suitable for multi-line content, usually one column layout is of fixed width.

One column layout * {margin:0;padding:0;} # header {height:50px; background:blue;} # main {width:960px; height:800px; / * does not set the height of the column in actual development, making it highly adaptive. * / background:green; margin:0 auto;} # footer {width:960px; height:100px; background:gray; margin:0 auto;} header body content footer

The home pages of Sina and NetEase use a column layout.

3. Adaptive layout of single column width

To adapt to the width, you only need to set the width as a percentage, and the content can be automatically resized according to the browser window.

One column adaptive layout * {margin:0;padding:0;} # header {height:50px; background:blue;} # main {width:80%; height:800px; / * does not set the height of the column in actual development, making it highly adaptive. * / background:green; margin:0 auto;} # footer {width:80%; height:50px; background:gray; margin:0 auto;} header body content footer

4. Adaptive single-column layout

This layout structure is more suitable for websites with intensive content.

Single-column layout * {margin:0;padding:0;} # wrap {width:80%; margin:0 auto; border:2px solid black;} # header {width:100%; height:100px; background:blue; margin-bottom:10px;} # main {width:100%; margin-bottom:10px;} # main .content {height:500px / * do not set the height of the column in the actual development, so that it is highly adaptive. * / background:yellow;} # footer {width:100%; height:100px; background:gray } header, main content, footer, thank you for reading this article carefully. I hope the article "how to achieve a column layout of DIV+CSS" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.