作业1-简单项目布局
2018-11-04 本文已影响0人
crx彭彭
布局
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单布局</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.header{
height: 50px;
background-color: blue;
}
.next{
height:100px;
background-color: white;
}
.next1{
height: 470px;
background-color: pink;
margin: 30px auto
}
.next2{
width: 1200px;
height: 700px;
background-color: white;
margin: 0px auto;
margin: 20px auto;
}
.next21{
width:1200px;
height: 450px;
background-color: white;
margin: 20px auto
}
.next211{
width: 800px;
height:450px;
background-color: yellow;
float: left;
}
.next212{
width: 400px;
height: 450px;
background-color: olive;
float: left;
}
.next22{
width: 1200px;
height:250px;
background-color:white;
float:left;
}
.next221{
width: 400px;
height: 250px;
background-color:orange;
float: left;
}
.next222{
width: 400px;
height: 250px;
background-color:black;
float: left;
}
.next223{
width: 400px;
height: 250px;
background-color:gray;
float: left;
}
.center{
width: 1200px;
height: 800px;
background-color:purple;
margin: 0px auto;
margin: 20px auto;
}
.center1{
width: 1200px;
height: 100px;
background-color:white;
}
.center2{
width: 1200px;
height: 350px;
background-color:white;
}
.center21{
width: 300px;
height: 350px;
background-color:red;
float: left;
}
.center22{
width: 300px;
height: 350px;
background-color:green;
float: left;
}
.center23{
width: 300px;
height: 350px;
background-color:orange;
float: left;
}
.center24{
width: 300px;
height: 350px;
background-color:blue;
float: left;
}
.center3{
width: 1200px;
height: 350px;
background-color: white;
}
.center31{
width: 300px;
height: 350px;
background-color: black;
float: left;
}
.center32{
width: 300px;
height: 350px;
background-color: gray;
float: left;
}
.center33{
width: 300px;
height: 350px;
background-color: pink;
float: left;
}
.center34{
width: 300px;
height: 350px;
background-color: brown;
float: left;
}
</style>
</head>
<body>
<div class="header">
</div>
<div class='next'></div>
<div class='next1'></div>
<div class='next2'>
<div class='next21'>
<div class="next211"></div>
<div class="next212"></div>
</div>
<div class='next22'>
<div class='next221'></div>
<div class="next222"></div>
<div class="next223"></div>
</div>
</div>
<div class="center">
<div class="center1"></div>
<div class="center2">
<div class="center21"></div>
<div class="center22"></div>
<div class="center23"></div>
<div class="center24"></div>
</div>
<div class="center3">
<div class="center31"></div>
<div class="center32"></div>
<div class="center33"></div>
<div class="center34"></div>
</div>
</div>
</body>
</html>
12457501-c6a224805adffb1d.png
12457501-cb4fc146767a3056.png
