Common CSS layout implementation methods_html/css

Common CSS layout implementation methods_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:39:50

Original

1530 people have browsed it

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;}

Copy after login

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;}

Copy after login

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;}

Copy after login

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}

Copy after login

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}

Copy after login

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>

Copy after login