1.一列布局
(一)一列自适应
自适应浏览器，随着浏览器的拉伸而变化，一般宽度采用百分比的写法，很简<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>一列布局自适应</title>
<style type="text/css">
body{
margin: 0; /*清除浏览器默认样式*/
padding: 0;
}
div{
text-align: center; /*字体居中*/
font-size: 30px;
font-weight: bold;
}
.head,.middle,.foot{
width: 50%; /*百分比宽度*/
margin: 0 auto; /* 典型的设置居中*/
}
.head{
height: 200px;
background: #F0B6CF;
}
.middle{
height: 500px;
background: tan;
}
.foot{
height: 200px;
background-color: #57A9D1;
}
</style>
</head>
<body>
<div class="head">head</div>
<div class="middle">middle</div>
<div class="foot">foot</div>
</body>
</html>
(二)一列固定
顾名思义，固定布局的宽度，设置固定的PX值。
只需要在上面一列自适应的HTML代码中，把width:50% 修改成 width:960px即可，当然，各部分如果要求设置的宽度不同，在每个部分的类选择器上进行适当修改即可。
2.二列布局
(一)二列自适应
二列的自适应，这时候要用到float属性。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>二列自适应</title>
<style type="text/css">
body{
margin: 0; /*清除浏览器默认样式*/
padding: 0;
}
div{
text-align: center; /*字体居中*/
font-size: 30px;
font-weight: bold;
}
.left{
width: 30%;
background-color: #CCFF00;
height: 500px;
float: left; /*先左浮动，使之靠浏览器左侧*/
}
.right{
width: 70%;
height: 500px;
background-color: bisque;
float: right; /*先右浮动，使之靠浏览器右侧*/
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
注意：以上百分比30%和70%加起来刚好是100%，宽度会充满整个浏览器页面，如果加起来没有100%，则他们中间会空出一栏的空间出来。
(二)二列居中自适应
在左右部分包裹成一个div,在该div类选择器中选择 margrin:0,auto;设置宽度为：80%；则子代标签的宽度会基于80%的浏览器宽度来定。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>二列居中自适应</title>
<style type="text/css">
body{
margin: 0; /*清除浏览器默认样式*/
padding: 0;
}
div{
text-align: center; /*字体居中*/
font-size: 30px;
font-weight: bold;
}
.main{
width:80%;
height: 500px;
margin: 0 auto; /*居中*/
}
.left{
width: 30%;
background-color: #CCFF00;
height: 500px;
float: left; /*先左浮动，使之靠浏览器左侧*/
}
.right{
width: 70%;
height: 500px;
background-color: bisque;
float: right; /*先右浮动，使之靠浏览器右侧*/
}
</style>
</head>
<body>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
(三)二列居中固定
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>二列居中固定宽度</title>
<style type="text/css">
body{
margin: 0; /*清除浏览器默认样式*/
padding: 0;
}
div{
text-align: center; /*字体居中*/
font-size: 30px;
font-weight: bold;
}
.main{
width:960px;
height: 500px;
margin: 0 auto;
}
.left{
width: 360px;
background-color: #CCFF00;
height: 500px;
float: left; /*先左浮动，使之靠浏览器左侧*/
}
.right{
width: 600px;
height: 500px;
background-color: bisque;
float: right; /*先右浮动，使之靠浏览器右侧*/
}
</style>
</head>
<body>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>