项目的基本布局
2018-11-21 本文已影响0人
浮_屠
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*下面是头部*/
.head{
width: 100%;
height: 187px;
background-color: #f12;
}
.ha1{
width: 100%;
height: 28px;
background-color: yellow;
}
.ha2-1{
width: 1200px;
height: 28px;
background-color: gold;
margin: 0 auto;
}
.ha3-1{
width: 160px;
height: 28px;
background-color: #f90;
float: left;
}
.ha3-2{
width: 504px;
height: 28px;
background-color: #f50;
float: right;
}
.ha4-1{
width: 199px;
height: 28px;
background-color: #f20;
float: left;
}
.ha4-2{
width: 304px;
height: 28px;
background-color: #f70;
float: right;
}
.he1{
width: 100%;
height: 115px;
background-color: #fca;
}
.he2-1{
width: 1200px;
height: 115px;
background-color: #ff9706;
margin: 0 auto;
}
.he3-1{
width: 404px;
height: 93px;
background-color: #f12;
float: left;
}
.he3-2{
width: 392px;
height: 40px;
background-color: #f50;
float: left;
margin-top: 53px;
}
.he3-3{
width: 200px;
height: 115px;
background-color: gold;
float: right;
}
.hd1{
width: 100%;
height: 44px;
background-color: #fce;
}
.hd2-1{
width: 1200px;
height: 44px;
background-color: #f39;
margin: 0 auto;
}
.hd3-1{
width: 202px;
height: 44px;
background-color: rgb(188,75,75);
float: left;
}
.hd3-2{
width: 622px;
height: 44px;
background-color: #ecb;
float: left;
}
/*下面是身体*/
.conter{
width: 100%;
height: 13478px;
background-color: #a24;
}
.conters{
width: 1519px;
height: 13446px;
background-color: #f00;
margin: 0 auto;
}
.con1-1{
width: 1519px;
height: 500px;
background-color: #fff;
}
.con1-2{
width: 1519px;
height: 300px;
background-color: #ff5031;
}
.con1-3{
width: 1519px;
height: 290px;
background-color: #d30423;
}
.con1-4{
width: 1519px;
height: 373px;
background-color: #a02834;
}
.con1-5{
width: 1519px;
height: 156px;
background-color: #b49503;
}
.con1-6{
width: 1519px;
height: 398px;
background-color: #c23123;
}
.list1-1{
width: 1200px;
height: 932px;
background-color: green;
margin: 0 auto;
}
.con1-7{
width: 1519px;
height: 171px;
background-color: yellow;
}
.con1-8{
width: 1519px;
height: 382px;
background-color: gold;
}
.con1-9{
width: 1519px;
height: 399px;
background-color: green;
}
.cont1-1{
width: 1519px;
height: 444px;
background-color: blue;
}
.cont1-2{
width: 1519px;
height: 542px;
background-color: #acd;
}
.cont1-3{
width: 1519px;
height: 337px;
background-color: yellow;
}
.cont1-4{
width: 1519px;
height: 501px;
background-color: gold;
}
.cont1-5{
width: 1519px;
height: 594px;
background-color: #dec;
}
.cont1-6{
width: 1519px;
height: 335px;
background-color: yellow;
}
.cont1-7{
width: 1519px;
height: 502px;
background-color: #eef;
}
.cont1-8{
width: 1519px;
height: 593px;
background-color: #fac;
}
.cont1-9{
width: 1519px;
height: 593px;
background-color: gold;
}
.conte1-1{
width: 1519px;
height: 497px;
background-color: green;
}
.conte1-2{
width: 1519px;
height: 178px;
background-color: blue;
}
.conte1-3{
width: 1519px;
height: 174px;
background-color: yellow;
}
.conte1-4{
width: 1519px;
height: 249px;
background-color: #fed;
}
.conte1-5{
width: 1519px;
height: 739px;
background-color: yellow;
}
.conte1-6{
width: 1519px;
height: 499px;
background-color: green;
}
.conte1-7{
width: 1519px;
height: 602px;
background-color: gold;
}
.conte1-8{
width: 1519px;
height: 556px;
background-color: #acd;
}
/*下面是脚*/
.foot{
width: 100%;
height: 614px;
background-color: #a90;
}
.f{
width: 1519px;
height: 71px;
background-color: gold;
}
.o1{
width: 1200px;
height: 263px;
background-color: green;
margin: 0 auto;
}
.o2{
width: 1519px;
height: 280px;
background-color: blue;
}
</style>
</head>
<body>
<!-- 头 -->
<div class="head">
<div class="ha1">
<div class="ha2-1">
<div class="ha3-1"></div>
<div class="ha3-2">
<div class="ha4-1"></div>
<div class="ha4-2"></div>
</div>
</div>
</div>
<div class="he1">
<div class="he2-1">
<div class="he3-1"></div>
<div class="he3-2"></div>
<div class="he3-3"></div>
</div>
</div>
<div class="hd1">
<div class="hd2-1">
<div class="hd3-1"></div>
<div class="hd3-2"></div>
</div>
</div>
</div>
<!-- 身 -->
<div class="conter">
<div class="conters">
<div class="con1-1"></div>
<div class="con1-2"></div>
<div class="con1-3"></div>
<div class="con1-4"></div>
<div class="con1-5"></div>
<div class="con1-6"></div>
<div class="list1-1"></div>
<div class="con1-7"></div>
<div class="con1-8"></div>
<div class="con1-9"></div>
<div class="cont1-1"></div>
<div class="cont1-2"></div>
<div class="cont1-3"></div>
<div class="cont1-4"></div>
<div class="cont1-5"></div>
<div class="cont1-6"></div>
<div class="cont1-7"></div>
<div class="cont1-8"></div>
<div class="cont1-9"></div>
<div class="conte1-1"></div>
<div class="conte1-2"></div>
<div class="list1-1"></div>
<div class="conte1-3"></div>
<div class="list1-1"></div>
<div class="conte1-4"></div>
<div class="conte1-5"></div>
<div class="conte1-6"></div>
<div class="conte1-7"></div>
<div class="conte1-8"></div>
</div>
</div>
<!-- 脚 -->
<div class="foot">
<div class="f"></div>
<div class="o1"></div>
<div class="o2"></div>
<div class="t"></div>
</div>
</body>
</html>
