2018-11-21 简单布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>孔夫子旧书网</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.toub{
width: 100%;
height: 40px;
background-color: #ab1212;
}
.ann{
width: 100%;
height: 100px;
background-color: #d6d6d6;
}
.ann0{
width: 1200px;
height: 100px;
background-color: #00CC00;
margin: 0 auto;
}
.ann1{
width: 300px;
height: 100px;
background-color: #0e3755;
float: left;
margin: 0 auto;
}
.ann2{
width: 700px;
height: 100px;
background-color: #00a2e8;
float: right;
}
.ye{
width: 1200px;
height: 60px;
background-color: #1cb7fd;
margin: 0 auto;
}
.mul{
width:1200px;
height: 1500px;
background-color: #0d55a5;
margin: 0 auto;
}
.mul0{
width: 1200px;
height:650px;
background-color: #4ab14e;
margin: 70px auto;
}
.mul1{
width: 1200px;
height:650px;
background-color: #0f8ec7;
margin: 70px auto;
}
.mul2{
width: 1200px;
height:650px;
background-color: #6c6b6c;
margin: 70px auto;
}
.mul3{
width: 1200px;
height:650px;
background-color: #a6e1ec;
margin: 70px auto;
}
.mul4{
width: 1200px;
height:650px;
background-color: #0d55a5;
margin: 70px auto;
}
.mul5{
width: 1200px;
height:650px;
background-color: #8a8a8a;
margin: 70px auto;
}
.mul6{
width: 1200px;
height:650px;
background-color: #169bd9;
margin: 70px auto;
}
</style>
</head>
<body>
<div class="toub"></div>
<div class="ann">
<div class="ann0">
<div class="ann1"></div>
<div class="ann2"></div>
</div>
<div class="ye">
<div class="ye1"></div>
</div>
<div class="mul"></div>
<div class="mul0"></div>
<div class="mul1"></div>
<div class="mul2"></div>
<div class="mul3"></div>
<div class="mul4"></div>
<div class="mul5"></div>
<div class="mul6"></div>
</body>
