Simple CSS webpage Layout-one or two columns layout, css layout-one or two columns
1. One-Column Layout
(1) one-column adaptive
The adaptive browser changes with the browser stretching. The width is usually written in percentages, which is very simple <! DOCTYPE html>
<Html>
(2) fixed one column
As the name implies, set a fixed PX value for the fixed layout width.
You only need to modify width: 50% to width: 960px In the adaptive HTML code of the above column. Of course, if the width of each part is different, modify the class selector of each part.
2. Two-Column Layout
(1) two-column adaptive
The float attribute is used for the adaptive operation of two columns.
<! DOCTYPE html>Note: The percentages of 30% and 70% are exactly 100%, and the width is full of the entire browser page. If the sum is not 100%, the space in the middle will be blank.
(2) Adaptive two-column center
Wrap the left and right parts into a div. In the div class selector, select margrin: 0 and auto. Set the width to 80%; the width of the Child tag is determined based on the browser width of 80%.
1 <! DOCTYPE html> 2(3) fixed two-column center
1 <! DOCTYPE html> 2
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
