标题:使用htnl,css实现简单的布局
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
测试简单布局
</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.header{
width:700px;
height:100px;
background-color:orange;
margin:0 auto;
}
.content{
width:700px;
height:350px;
background-color:yellow;
margin:10px auto;
}
.box1{
width:150px;
height:100%;
background-color:rgb(225,230,246);
float:left;
}
.box2{
width:380px;
height:100%;
background-color:green;
float:left;
margin:0 10px;
}
.box21{
width:380px;
height:170px;
background-color:pink;
}
.box22{
width:380px;
height:170px;
background-color:skyblue;
margin-top:10px;
}
.box221{
width:100px;
height:170px;
background-color:#abc;
float:left;
}
.box222{
width:160px;
height:170px;
background-color:#bac;
margin:0px 10px;
float:left;
}
.box223{
width:100px;
height:170px;
background-color:#cba;
float:left;
}
.box3{
width:150px;
height:100%;
background-color:rgb(242,80,34);
float:left;
}
.footer{
width:700px;
height:100px;
background-color:purple;
margin:0 auto;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content">
<div class="box1"></div>
<div class="box2">
<div class="box21"> </div>
<div class="box22">
<div class="box221"></div>
<div class="box222"></div>
<div class="box223"></div>
</div>
</div>
<div class="box3"></div>
</div>
<div class="footer"></div>
<img src="magazine-unlock-hi1057703.jpg" width="300" alt="周杰伦"/><br/>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1bf1390277bacfd85266b2592bd23a9e.png)