css簡單布局
一列布局
寬度未定義則寬度為通欄的寬度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>一列布局</title>
<style>
div{text-align: center;}
.head{height: 100px;background-color:red;}
.main{margin: 0 auto;height:500px;background-color:yellow;width: 80%;}
.foot{margin: 0 auto;background-color:blue;width:80%;}
</style>
</head>
<body>
<div class="head">head</div>
<div class="main">main</div>
<div class="foot">foot</div>
</body>
</html>
兩列布局
<!--利用浮動或絕對定位去除文檔樣式-->
<!DOCTYPE html>
<html>
<head>
<title>二列布局</title>
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.main{ width:80%; height:600px; margin:0 auto}
.left{ width:20%; height:600px; background:#ccc; float:left}
.right{ width:80%; height:600px; background:#FCC; float:right}
</style>
</head>
<body>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body></html>
三列布局
<!--ＣＳＳ中的 margin 和 padding 都是順時鐘方向進行定義的-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-weight:bold}
div{ line-height:50px}
.left{ width:200px; height:600px; background:#ccc; position: absolute; left:0; top:0}
.main{ height:600px; margin:0 310px 0 210px; background:#9CF}
.right{ height:600px; width:300px; position:absolute; top:0;right:0;; background:#FCC;}
</style>
</head>
<body>
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</body>
</html>
css簡單布局