作业 布局
2018-11-21 本文已影响0人
周肸
HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布局</title>
<link rel="stylesheet" type="text/css" href="css/hei.css">
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5">
<div class="box6"></div>
<div class="box8"></div>
<div class="box7"></div>
</div>
<div class="box9">
<div class="box10"></div>
<div class="box11"></div>
</div>
<div class="box12">
<div class="box13"></div>
<div class="box14"></div>
</div>
<div class="box15">
<div class="box16"></div>
<div class="box17"></div>
</div>
<div class="box18">
<div class="box19"></div>
<div class="box20"></div>
</div>
<div class="box18">
<div class="box19"></div>
<div class="box20"></div>
</div>
</body>
</html>
CSS文件
*{
margin:0;
padding:0;
}
.box{
width: 100%;
height: 31px;
background-color:#e0e0e0;
}
.box1{
width: 1200px;
height: 31px;
background-color:#05e6e6;
margin:0 auto;
}
.box2{
width: 1200px;
height: 100px;
background-color:#E9967A;
margin: 0 auto;
}
.box3{
width: 1200px;
height: 118px;
background-color:#FFF68F;
margin:0 auto;
}
.box4{
width:100%;
height: 43px;
background-color:#FF0000;
}
.box5{
width: 1200px;
height: 360px;
background-color: #00FFFF;
margin:0 auto;
}
.box6{
width: 200px;
height: 360px;
background-color:#808080;
float: left;
}
.box7{
width: 240px;
height: 350px;
background-color:#808080;
float:right;
margin:5px 0;
}
.box8{
width: 750px;
height: 350px;
background-color: #FFFF00;
margin:5px;
float:left;
}
.box9{
width: 1200px;
height: 332px;
background-color: #2B6FD5;
margin:10px auto;
}
.box10{
width: 950px;
height: 332px;
background-color: #EE11EE;
float: left;
margin: 0 10px 0 0;
}
.box11{
width: 240px;
height: 332px;
background-color: #00FF00;
float: right;
}
.box12{
width: 1200px;
height: 394px;
background-color: #FF0033;
margin:10px auto;
}
.box13{
width: 950px;
height: 394px;
background-color: #EE11EE;
float: left;
margin: 0 10px 0 0;
}
.box14{
width: 240px;
height: 394px;
background-color: #00FF00;
float: right;
}
.box15{
width: 1200px;
height: 347px;
background-color:#0C050C;
margin:10px auto;
}
.box16{
width: 1200px;
height: 21px;
margin-bottom: 19px;
background-color:#05e6e6;
border-bottom: 2px #333 solid;
}
.box17{
width: 1200px;
height: 310px;
background-color:#ff00ff;
}
.box18{
width: 1200px;
height: 478px;
background-color: #990099;
margin: 10px auto;
}
.box19{
width: 925px;
height: 443px;
background-color: #CAFF70;
float: left;
margin: 17px 27px;
}
.box20{
width: 210px;
height: 439px;
background-color:#CD2626;
float:right;
margin:19px 5px;
}
捕获.PNG
