布局有很多種,下面是最簡單的一種,看圖:
固定寬度布局
絕對定位法
比較麻煩, 就不說了
浮動法
一般都是使用浮動法
儲存代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
div{
border:red 1px solid;
margin:20px auto 20px auto;
padding: 10px 10px 10px 10px ;
}
#head,#middle,#foot{
width :900px;
text-align: center;
}
#middle{
border:0px;
position:relative;
height :500px;
}
#left{
position:absolute;
width:600px;
flaot:left;
height:400px;
}
#right{
height:200px;
margin-left:700px;
flaot:right;
}
</style>
</head>
<body>
<div id = "head">頭部</div>
<div id = "middle">中間
<div id = "left">左邊</div>
<div id = "right">右邊</div>
</div>
<div id = "foot">尾部</div>
</body>
</html>
變框布局
就是使用百分比值