詳解DIV+CSS佈局，position：absolute佈局
DIV+CSS佈局 html
DIV+CSS佈局是很是經典的，同時也是對初學者頗有用的。看起來佈局很簡單，可是對於初學者來講，在佈局過程當中會碰見不少問題。如今將講解用DIV+CSS佈局下面的內容佈局
這裏用div填充滿了每個板塊。對於途中黑色邊框 {border：1px solid black；}要特別說明，因爲邊框也佔用了1個像素，因此在總體佈局的時候要減去邊框的像素，否則佈局會溢出，致使混亂。spa
代碼以下：htm
<html>
<head>
<style>
*{margin:0; padding:0;}
.container{width:960px; height:650px; background:red; margin:auto; border:1px solid black;}
.banner{width:100%; height:40px; background:yellow;}
.nav{width:100%; height:20px; background:blue;}
.main{width:100%; height:570px; background:gray;}
.float{float:left;}
.space1{width:700px; height:20px; background:white;}
.space2{width:50px; height:230px; background:white;}
.space3{width:50px; height:280px; background:white;}
.main_left{width:700px; height:570px; background:silver; float:left;}
.main_left_top{width:700px; height:250px; background: red;}
.main_left_top_content{width:700px; height:230px; background:yellow;}
.lm1{width:300px; height:230px; background:green;}
.lm2{width:300px; height:230px; background:green;}
.main_left_bottom{wdith:700px; height:320px; background:blue;}
.main_left_bottom_content{width:width:700px; height:280px; background:yellow;}
.lm3{width:150px; height:280px; background:blue;}
.lm4{width:200px; height:280px; background:blue;}
.lm5{width:150px; height:280px; background:blue;}
.main_right{width:258px; height:568px; background:orange; float:left;border:1px solid black;}
.space4{width:54px; height:568px; background:white;}
.space5{width:150px; height:15px; background:white;}
.lm6{width:150px; height:168px; background:blue;}
.lm7{width:150px; height:170px; background:blue;}
.lm8{width:150px; height:170px; background:blue;}
.footer{width:100%; height:20px; background:green;}
</style>
</head>
<body>
<div class="container">
<div class="banner"></div>
<div class="nav"></div>
<div class="main">
<div class="main_left">
<div class="main_left_top">
<div class="space1"></div>
<div class="main_left_top_content">
<div class="space2 float"></div>
<div class="lm1 float"></div>
<div class="space2 float"></div>
<div class="lm2 float"></div>
</div>
</div>
<div class="main_left_bottom">
<div class="space1 flaot"></div>
<div class="main_left_bottom_content">
<div class="space3 float"></div>
<div class="lm3 float"></div>
<div class="space3 float"></div>
<div class="lm4 float"></div>
<div class="space3 float"></div>
<div class="lm5 float"></div>
<div class="space3 float"></div>
</div>
<div class="space1"></div>
</div>
</div>
<div class="main_right">
<div class="space4 float"></div>
<div class="right_content float">
<div class="space5"></div>
<div class="lm6"></div>
<div class="space5"></div>
<div class="lm7"></div>
<div class="space5"></div>
<div class="lm8"></div>
<div class="space5"></div>blog
</div>
<div class="space4 float"></div>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
it
position：absolute
io
對於{position：absolute；}要注意是相對父級元素，即若是要對某一父級元素main絕對佈局， .main{width:100%; height:650px; background:orange; position:relative;} position:relative; 是重點。class
以下圖所示：float
代碼以下：im
<html> <head> <style> *{margin:0; padding:0;} .container{width:960px; height:700px; margin:auto; background:red;} .top{width:100%; height:50px; background:yellow;} .main{width:100%; height:650px; background:orange; position:relative;} .div1{width:250px; height:200px; background:blue; top:20px; left:50px; position:absolute;} .div2{width:250px; height:200px; background:red; top:20px; left:350px; position:absolute;} .div3{width:250px; height:200px; background:blue; top:240px; left:50px; position:absolute;} .div4{width:250px; height:200px; background:red; top:240px; left:350px; position:absolute;} .div5{width:250px; height:200px; background:red; top:240px; left:650px; position:absolute;} </style> </head> <body> <div class="container"> <div class="top"></div> <div class="main"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> <div class="div5"></div> </div> </div> </body> </html>