摘要：浮动负责版面的布局。 定位负责块元素的相对位置和更准确的定位。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>float</
浮动负责版面的布局。
定位负责块元素的相对位置和更准确的定位。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
*{
margin:0;
padding:0;
}
.box{
width:980px;
height:540px;
/*background-color: black;*/
margin:100px auto;
}
.header{
height:100px;
width:980px;
}
.header-box1{
width:250px;
height:100px;
background-color: tomato;
float:left;
}
.header-box2{
width:150px;
height:50px;
background-color: #00ffff;
float:right;
}
.header-box3{
width:650px;
height:50px;
float:right;
background-color: #771281;
}
.content{
width:980px;
height:400px;
/*background-color: yellowgreen;*/
margin-top:10px;
box-sizing:border-box;
}
.left{
width:320px;
height:400px;
float:left;
}
.content-box1{
width:320px;
height:400px;
background-color: yellow;
}
.right{
width:650px;
height:400px;
float:right;
}
.zuo{
width:390px;
height:400px;
float:left;
}
.you{
width:250px;
height:400px;
float:right;
margin-left:10px;
}
.content-box5{
width:240px;
height:350px;
float:right;
background-color: #9dca32;
}
.content-box2{
width:400px;
height:200px;
float:left;
margin-bottom:10px;
background-color: #ff1f96;
}
.content-box3{
width:400px;
height:140px;
float:left;
margin-bottom:10px;
background-color: #01bbff;
}
.content-box4{
width:650px;
height:40px;
float:left;
background-color: #b88412;
}
.footer{
width:980px;
height:40px;
margin-top:10px;
background-color: tomato;
}
</style>
</head>
<body>
<div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div>
<div></div>
</div>
<div>
<div>
<div>box2</div>
<div>box3</div>
<div>box4</div>
</div>
<div>
<div>box5</div>
</div>
</div>
</div>
<div></div>
</div>
</body>
</html>
批改老师：PHP中文网批改时间：2018-11-04 14:01:26
老师总结：css写的正确，但是没有应用了div中哦
