Home > Article > Web Front-end > Common CSS layout implementation methods_html/css_WEB-ITnose
Common CSS layout implementation methods_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:39:501545browse
CSS layout is both familiar and unfamiliar to me. I can both implement it and not understand it very well. So I want to summarize and sort out the implementation methods of one-column, two-column, and three-column layouts commonly used in CSS. This article is for beginners and is for reference only. But you also need to understand floating, positioning, etc.
1. One-column layout
1. Centered fixed width
This is the simplest and easiest layout to implement. List the core CSS codes:
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 thing is the margin attribute. When the width is set for an element, margin:0 auto can automatically center the element.
2. Adaptive
This is also very simple. You only need to set the width attribute of the element in the above CSS code to a percentage, so that the browser can automatically calculate the width of the element.
2. Two-column layout
1. Fixed width
This should not be difficult, just set the corresponding width. The code is posted 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 attribute, which is often referred to as float. One floats to the left and the other floats to the right, which can exactly achieve a two-column layout. ‘
2. Adaptive
Replace the value of the width attribute with a percentage, it’s that simple.
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 must also be set to percentage.
Three-column layout
1. Left and right fixed width
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;position: absolute;top: 0;left: 0}.right{width: 240px;height: 900px;background-color: #999;position:absolute;top: 0;right: 0} The most important thing here is the use of absolute positioning, and let the middle The margins on the left and right are the widths of both sides.
2. Adaptive
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;position: absolute;top: 0;left: 0}.right{width: 20%;height: 900px;background-color: #999;position:absolute;top: 0;right: 0} Similarly, it is converted into a percentage.
4. Mixed Layout
Finally, let’s do a comprehensive summary of the previous ones.
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>混合布局自适应</title> <link rel="stylesheet" href=""> <style type="text/css"> body{text-align: center;font-size: 2em;margin: 0;padding: 0} .head,.main,.footer{width: 80%; margin:0 auto;} .head{background-color: #ccc; height: 100px} .footer{background-color: #9cc; height: 100px} .main{position: relative;} .left{width: 20%;height: 900px; background-color: #eee;position: absolute;top: 0;left: 0; overflow: hidden;} .middle{height: 900px; background-color: #fcc; margin: 0 20%; overflow: hidden;} .right{width: 20%; height: 900px; background-color: #eee;position: absolute; top: 0; right: 0;overflow: hidden;} </style></head><body> <div class="head">head</div> <div class="main"> <div class="left">left</div> <div class="middle">middle</div> <div class="right">right</div> </div> <div class="footer">footer</div></body></html>