css传统布局[下]

效果：

index.html

	
	
	




	header


111111

style.css

@charset "utf-8";
body{
	margin:100px;
	height: 800px;
	border:1px solid red;
	/*在body父元素设置一个不需要top和left定位的相对定位,这叫做相对定位点*/
	position: relative;
}
/*header{
	width:100px;
	height: 100px;
	background-color: silver;
	position: absolute;
	top:0;
	left: 0;
	z-index: 1;
}
aside{
	width:100px;
	height: 100px;
	background-color: green;
	position: absolute;
	top:20px;
	left: 20px;
	z-index: 2;
}*/


/*header{
	width:100px;
	height: 100px;
	background-color: silver;
	position: fixed;
	top:100px;
	left:0;

}*/

/*header{
	width:100px;
	height: 100px;
	background-color: silver;
	position: relative;
	top: 10px;
	left: 10px;
}	
*/

header{
	width:100px;
	height: 100px;
	background-color: silver;
	position: absolute;
	top:100px;
	left: 100px;
}

index2.html

	
	
	




	header



	aside


	section


	footer

style2.css

@charset "utf-8";
body{
	width:960px;
	margin:0 auto;
	position: relative;
}
header{
	width: 960px;
	height: 120px;
	background-color: olive;
	/*position: absolute;*/
	/*top:0;*/
	/*left: 0;*/
}
aside{
	width: 200px;
	height: 400px;
	background-color: purple;
	/*position: absolute;*/
	top:120px;
	/*left: 0;*/
	
	
}
section{
	width: 760px;
	height: 400px;
	background-color: red;
	position: absolute;
    top:120px;
	left:200px;
	
	
}
footer{
	width: 960px;
	height: 120px;
	background-color: gray;
	/*position: absolute;*/
	top:520px;

}

index3.html

	
	
	




	header



	aside


	section
	


	footer

style3.css

@charset "utf-8";
body{
	width:960px;
	margin:0 auto;
}
header{
	height: 120px;
	background-color: olive;
	/*resize与overflow:auto一起用才出现可拖拽图形*/
	overflow: auto;
	resize: both;
}
aside{
	width: 200px;
	height: 400px;
	background-color: purple;
	border:5px solid green;
	/*上下左右空出10个像素*/
	padding:10px;
	/*border-box不让border和padding额外增加元素大小*/
	box-sizing: border-box;
	float:left;

}
section{
	width: 760px;
	height: 400px;
	background-color: red;
	float: right;

}
footer{
	width: 960px;
	height: 120px;
	background-color: gray;
    clear: both;
}
textarea{
	resize: none;
}

ppt: