##每台电脑分辨率不同，数值高度宽度需要自己调，仅供参考
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
display: flex;
align-items: center;
justify-content: center;
}
.main{
width: 100%;
font-size: 24px;
/*text-align: center;*/
display: block;
}
.main .banner{
widows: 100%;
height: 100px;
/*background: red;*/
}
.main .banner .logo{
background: gainsboro;
width: 20%;
height: 100%;
float: left;
}
.main .banner .banner1{
background: gainsboro;
width: 58%;
height: 100%;
float: left;
margin: 0px 19px;
}
.main .banner .banner2{
background: gainsboro;
width: 20%;
height: 100%;
float: left;
}
.main .menu{
width: 100%;
height: 43px;
background: gainsboro;
margin: 16px 0px;
}
.main .container{
display: block;
height: 680px;
}
.main .container .lanmu{
width: 653px;
/*background: gainsboro;*/
height:100%;
float: left;
margin-right: 15px;
display: block;
}
.main .container .lanmu2{
width: 457px;
/*background: gainsboro;*/
height:100%;
float: left;
display: block;
}
.lanmu .lanmu3{
width: 655px;
height: 300px;
border: 2px solid black;
}
.lanmu .lanmu4{
width: 309px;
height: 355px;
border: 2px solid black;
margin: 15px 15px 0px 0px;
display: inline-block;
float: left;
}
.lanmu .lanmu5{
margin-right: 0px;
}
.lanmu2 .lanmu6{
width: 450px;
height: 212px;
border: 2px solid black;
margin-bottom: 16px;
}
.foot{
width: 100%;
height: 80px;
background: gainsboro;
margin: 16px 0px;
}
</style>
</head>
<body>
<div class="main">
<div class="banner">
<div class="logo">logo</div>
<div class="banner1">banner1</div>
<div class="banner2">banner2</div>
</div>
<div class="menu">菜单</div>
<div class="container">
<div class="lanmu">
<div class="lanmu3">栏目一</div>
<div class="lanmu4">栏目三</div>
<div class="lanmu4 lanmu5">栏目四</div>
</div>
<div class="lanmu">
<div class="lanmu3">栏目二</div>
<div class="lanmu4">栏目五</div>
<div class="lanmu4 lanmu5">栏目六</div>
</div>
<div class="lanmu2">
<div class="lanmu6">栏目七</div>
<div class="lanmu6">栏目八</div>
<div class="lanmu6">栏目九</div>
</div>
</div>
<div class="foot">页脚</div>
</div>
</body>
</html>