效果图:
个人实现代码(与原作者有所不同):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin:0px;
padding:0px;
}
.red {
background:red;
}
.greenyellow {
background:greenyellow
}
.yellow {
background: peru;
}
.blue {
background:blue;
}
.pink {
background:pink;
}
.green{
background:green;
}
.turquoise {
background: turquoise;
}
.main{
width: 970px;
height: 600px;
overflow: hidden;
}
.top{
overflow: hidden;
}
.top-left {
width:277px;
height:103px;
float:left;
}
.top-right1 {
width: 137px;
height:49px;
float: right;
margin-bottom: 8px;
}
.top-right2 {
width: 679px;
height:46px;
float:right;
}
.center {
height:435px;
width:970px;
margin-top: 10px;
display:flow-root;
}
.center-left {
height:435px;
width:310px;
float:left;
}
.center-middle1 {
width:450px;
height:240px;
margin-bottom: 10px;
}
.center-middle2 {
width:450px;
height:110px;
margin-bottom: 10px;
}
.center-middle3 {
width:450px;
height:30px;
margin-bottom: 10px;
}
.center-middle4 {
width:650px;
height:25px;
}
.center-right {
width:190px;
height:400px;
float:right;
}
.bottom {
margin-top: 10px;
width:970px;
height: 35px;
}
</style>
</head>
<body>
<div class="main">
<div class="top">
<div class="top-left red"></div>
<div class="top-right1 greenyellow"></div>
<div class="top-right2 greenyellow"></div>
</div>
<div class="center">
<div class="center-left yellow"></div>
<div style="margin-left:320px;">
<div>
<div class="center-right pink"></div>
<div>
<div class="center-middle1 turquoise"></div>
<div class="center-middle2 turquoise"></div>
<div class="center-middle3 turquoise"></div>
</div>
</div>
<div class="center-middle4 green"></div>
</div>
</div>
<div class="bottom blue">
</div>
</div>
</body>
</html>
成果图: