本篇簡述利用CSS網頁佈局，知識點較少，瞭解實踐一下就搞定了。
一列布局
又與代碼比較簡單，就不做過多說明，直接貼代碼和效果圖
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<head>
<title>單列布局</title>
<style type="text/css">
body{
margin: 100px;padding: 0;
}
.header{
background: #ccc;
width: 200px;
color: #555;
height: 100px;
margin:0 auto;
}
.content{
width: 200px;
background: #444;
color: #fff;
height: 200px;
margin:0 auto;
}
.footer{
width: 200px;
background: #ccc;
color: #555;
height: 100px;
margin:0 auto;
}
</style>
</head>
<body>
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</body>
</html>運行效果圖如下：
自適應寬度及固定寬度的二列布局的實現
自適應寬度與固定寬度主要區別在於一個用百分比佈局控制一個用固定值控制，下面是相關代碼（固定寬度佈局這裏就不貼了）
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<head>
<title>自適應佈局</title>
<style type="text/css">
body{
background: #d3d4d7;
margin: 200px;padding: 0;
}
.main{
background: #FFF;
height: 400px;
margin: auto;
}
.left{
background: #ccc;
width: 30%;
height: 50%;
float: left;
}
.right{
background: #444;
width: 70%;
height: 50%;
float: right;
}
</style>
</head>
<body>
<div class="main">
<div class="left">
</div>
<div class="right">
</div>
</div>
</body>
</html>
運行效果圖：
用position定位方法實現自適應效果的三列布局
三列布局用到position的絕對定位屬性（不用float），實現左右拖動讓中間列自適應，主要知識點：position、margin。
下面是相關代碼
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<head>
<title>單列布局</title>
<style type="text/css">
body{
background: #eee;
margin: 0;
padding: 0;
}
.left{
background: #FF0000;
width: 20%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.center{
background: #444444;
width: 60%;
height: 100%;
margin: 0 20% 0 20%;
}
.right{
background: #FFF;
width: 20%;
height: 100%;
position: absolute;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
</body>
</html>
運行效果圖：
用HTML+CSS實現複雜結構的混合佈局
跟隨慕課網學習，發現這塊的知識比較簡單，這裏僅貼上自己的實踐代碼塊和效果圖，本篇僅作紀錄，並無多少知識點。
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<head>
<title>混合佈局</title>
<style type="text/css">
body{
background: #ccc;
margin: 0;
padding: 0;
}
.left{
background: #E3E0D5;
width: 20%;
height: 100%;
float: left;
}
.right{
background: #595959;
width: 80%;
height: 100%;
float: right;
}
.header{
height: 50px;
margin: 0 auto;
background: #FFF;
}
.footer{
width: 60%;
height: 100px;
margin: 0 auto;
background: #FFF;
}
.main{
width: 60%;
height: 800px;
margin: 0 auto;
background: #888888;
}
.login{
height: 150px;
background: #F0F0F0;
margin: 10 auto;
}
</style>
</head>
<body>
<div class="header">
</div>
<div class="main">
<div class="left">
<div class="login"></div>
</div>
<div class="right">
</div>
</div>
<div class="footer">
</div>
</body>
</html>
效果圖：
三列布局不僅僅是絕對定位可以實現，其他方式也可以，條條道路通羅馬。
