天天看點

web初探-css-寬度布局

布局有很多種,下面是最簡單的一種,看圖:

web初探-css-寬度布局

固定寬度布局

絕對定位法

比較麻煩, 就不說了

浮動法

一般都是使用浮動法

儲存代碼:

<!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>
           

變框布局

就是使用百分比值