CSS Common Layout Implementation method

Source: Internet
Author: User

CSS layout for me, both familiar and unfamiliar. I can not only realize it, but also do not have a good understanding of it. So want to summarize, comb the CSS commonly used in a column, two columns, three columns layout and other implementation methods. This article is small white, for reference only. But also to understand the floating, positioning and so on.

One or one column layout

1. Center width

This is the simplest and easiest to implement layout. List the most core CSS code:

Body{text-align:center;font-size:2em;}. head,.main,.footer{width:960px;margin:0 Auto;}. Main{background-color: #666666; height:600px;}. Footer{background-color: #999999; height:200px;}

Among them, the most important is the margin property, when the element is set to the width, margin:0 Auto can automatically let the element center.

2. Self-adapting

This is also very simple, just set the width property of the elements in the CSS code above to a percentage, which allows the browser to automatically calculate the width of the element.

Second, two-column layout

1. Fixed width

This should also be no difficulty, just set the corresponding width of the good. Put the code here:

Body{text-align:center;font-size:2em;}. main{width:960px;height:900px;margin:0 Auto;}. Left{width:300px;height:900px;background-color: #eee; float:left}.right{width:660px;height:900px; Background-color: #999; float:right;}

This involves the float property, which is often said to float. One floats to the left, one to the right, and a two-column layout happens. ‘

2. Self-adapting

It is simple to replace the value of the Width property with a percentage.

Body{text-align:center;font-size:2em;}. main{width:80%;height:900px;margin:0 Auto;}. Left{width:30%;height:900px;background-color: #eee; Float:left}.right{width:70%;height:900px;background-color: # 999;float:right;}

Note: The parent element is also set to a percentage.

Three or three column layout

1. Fixed width around

Body{text-align:center;font-size:2em;margin:0;padding:0}.main{height:900px;background-color: #ddd; margin:0 240px ;}. Left{width:240px;height:900px;background-color: #eee;p osition:absolute;top:0;left:0}.right{width:240px;height: 900px;background-color: #999;p osition:absolute;top:0;right:0}

The main point here is to use absolute positioning, and let the middle margin around the width of the two sides.

2. Self-adapting

Body{text-align:center;font-size:2em;margin:0;padding:0}.main{height:900px;background-color: #ddd; margin:0 20%;}. Left{width:20%;height:900px;background-color: #eee;p osition:absolute;top:0;left:0}.right{width:20%;height:900px ; Background-color: #999;p osition:absolute;top:0;right:0}

In the same way, it is replaced by a percentage.

Four, mixed layout

Finally, a big synthesis in front.

<! DOCTYPE html>

  

CSS Common Layout Implementation method

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.