DIV + CSS webpage layout: one column layout, divcss

DIV + CSS webpage layout: one column layout, divcss
1. webpage Layout

Layout is a comprehensive planning and arrangement of things. A page layout is a formatting arrangement of text, images, or tables on the page. Webpage layout is very important for improving the website's appearance, also known as layout. Most websites arrange content in multiple columns, just like magazines or newspapers, the Design of Web pages continues the characteristics of traditional paper media, but it is more flexible than traditional paper media. Due to the limitation of paper size, traditional paper media can only arrange content in a limited space, the layout of the webpage layout can be adaptive Based on the Content width and height. In HTML, div elements are often used to create multiple columns, and CSS is used to float and locate elements, so as to present the layout style in the webpage design draft on the webpage. Web page layout is the basis for creating web pages. It is usually used in three ways: stream layout, that is, elements are arranged according to the standard Document Stream; floating layout and absolute positioning layout. The common layout structures of various websites are divided into one-column layout, two-column layout, three-column layout, and hybrid layout. The most commonly used layout is hybrid layout, multiple columns are used for layout according to the actual needs of the website.

At present, most websites still adopt a set of general typographical modes, such as the header, footer, sidebar, and content area. Just like the traditional editing of newspapers and magazines, This is the expected webpage layout, which can be roughly divided into three columns: the country-shaped layout, the most common layout structure. The title text type, that is, a single column layout, similar to the Article Page. The left and right frame types, that is, two columns of layout. The upper and lower frame types are similar to the two columns of layout, but they are only upper and lower structures. Hybrid, that is, the combination of Multi-column layout, multiple types of changes, a relatively complex framework structure, also called the Integrated Framework type. The cover type is often used on the homepage of a website. Most of them place a beautiful picture on the first screen, similar to the poster style. It can be used for product display by combining some small animated effects, it will give people a pleasant feeling.

With the emergence of HTML5 and CSS3 new technologies and the rapid development of mobile devices, the Internet has undergone earth-shaking changes. For today, the layout does not have to be stuck in a fixed format. In recent years, the trend of web page layout design is not conventional layout. They do not strictly follow certain rules or established systems. Visual interaction, such as full screen layout, waterfall flow, and seamless tile layout are not limited to the traditional layout mode. For traditional websites, most information websites adopt a single column, two or three columns layout, and a hybrid layout structure. The layout structure of the page directly affects the user experience of the page. For example, the popular card-type webpage design not only has a beautiful appearance, but also has a strong practicability, and is highly integrated with information and content, but it is so simple and elegant. The popularity of card-based design is inseparable from responsive design. Responsive web design not only creates a mobile site, but also makes the website suitable for various browser sizes, such as PCs, tablets, and smartphones, the purpose of the responsive design is to create a website with beautiful sizes.

Below are some good web page designs found during exercises: QQ browser, 360 browser, Xiaomi mobile phone display page, nut mobile phone display page, and huaban network.

Compared with the layout structure of Chinese websites, we still need to appreciate some foreign website designs.

2. One-Column Layout

The layout of one column is mostly used on the homepage of a website, such as 360 searches. The layout of one column is concise and clear, and the topic is prominent. It is suitable for simple content arrangement and does not fit into multiple lines of content, the layout of a column is usually fixed in width.

1 <! DOCTYPE html> 2 
The homepage of Sina and Netease uses a column layout.
3. Adaptive Layout of single column width
To adapt the width, you only need to set the width according to the percentage, and the content can be adjusted automatically according to the browser window.
1 <! DOCTYPE html> 2 4. Adaptive Single-Column Layout
This layout structure is suitable for websites with intensive content.
1 <! Doctype html> 2