<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
.box {
width: 1000px;
margin: 0 auto;
}
.head {
height: 50px;
background-color: blue;
}
/*导航开始*/
.nav {
height: 120px;
margin-top: 20px;
}
.nav .nav-left {
width: 200px;
height: 100%;
background-color: aqua;
float: left;
}
.nav .nav-right-r {
width: 120px;
height: 100%;
background-color: aqua;
margin-left: 20px;
float: right;
}
.nav .nav-right-t {
width: 350px;
height: 50px;
background-color: green;
float: right;
}
.nav .nav-right-b {
width: 500px;
height: 50px;
background-color: yellow;
float: right;
margin-top: 20px;
}
/*导航结束*/
/*内容开始*/
.content {
height: 400px;
margin-top: 20px;
}
.content-left {
height: 100%;
width: 400px;
float: left;
background-color: yellowgreen;
}
.content .content-t-r {
width: 280px;
height: 300px;
float: right;
background-color: gold;
}
.content .content-t-l {
width: 280px;
height: 300px;
float: right;
margin-right: 20px;
background-color: #bfa;
}
.content .content-b {
width: 580px;
height: 80px;
float: right;
margin-top: 20px;
background-color: green;
}
/*内容结束*/
/*脚部开始*/
.foot {
height: 100px;
margin-top: 20px;
background-color: aqua;
}
</style>
</head>
<body>
<!-- 头部开始 -->
<div class="head box"></div>
<!-- 头部结束 -->
<!-- 导航开始 -->
<div class="nav box">
<div class="nav-left"></div>
<div class="nav-right-r"></div>
<div class="nav-right-t"></div>
<div class="nav-right-b"></div>
</div>
<!-- 导航结束 -->
<!-- 内容开始 -->
<div class="content box">
<div class="content-left"></div>
<div class="content-t-r"></div>
<div class="content-t-l"></div>
<div class="content-b"></div>
</div>
<!-- 内容结束 -->
<!-- 脚步开始 -->
<div class="foot box"></div>
<!-- 脚步结束 -->
</body>
</html>上述运行结果：