<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div.top{
background-color:darkmagenta;
min-height: 30px;
}
div.left,div.center,div.right,div.buttom{
float: left;
min-height: 200px;
}
.left{
width: 30%;
background-color:lavenderblush;
}
.center{
width: 55%;
background-color: greenyellow;
}
.right{
background-color: lightblue;
}
div.buttom{
background-color:#000000;
min-height: 15px;
}
@media screen and (min-width: 1200px) {
.left{
width: 25%;
}
.center{
width: 40%;
}
.right{
width: 15%;
}
.top{
width: 80%;
}
.buttom{
background-color: #000000;
width: 80%;
}
}
@media screen and (min-width: 992px)and (max-width: 1200px) {
.left{
width: 30%;
}
.center{
width: 70%;
}
.right{
width: 100%;
}
.top{
width: 100%;
}
.buttom{
background-color: #000000;
width: 100%;
}
}
@media screen and (min-width: 768px)and (max-width: 992px) {
.left,.right,.buttom,.top,.center{
width: 100%;
}
}
</style>
</head>
<body>
<div class="top"></div>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
<div class="buttom"></div>
</body>
</html>