使用htnl，css实现简单的布局_teb栏htnlcss-CSDN博客

本文链接：https://blog.csdn.net/weixin_45986454/article/details/106520748

标题：使用htnl，css实现简单的布局

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			测试简单布局
		</title>	
		<style type="text/css">
		/*清除浏览器默认的设置*/
		   *{
		   			margin:0px;
		   			padding:0px;
		   }
		   
		   
		   /*头部div*/
		   .header{
		   			width:700px;
		   			height:100px;
		   			background-color:orange;
		   			/*设置外边距*/
		   			margin:0 auto;
		   }
		   
		   
		   /*中间   内容div*/
		   .content{
		   			width:700px;
		   			height:350px;
		   			background-color:yellow;
		   			margin:10px auto;
		   }
		   
		   /*中间div中的左边*/
		   .box1{
		      width:150px;
		   			height:100%;
		   			background-color:rgb(225,230,246);
		   			float:left;
		   }
		   /*中间div中的中间*/
		   .box2{
		      width:380px;
		   			height:100%;  /*350*/
		   			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;
		   }
		   
		   /*中间div的右边*/
		   .box3{
		      width:150px;
		   			height:100%;
		   			background-color:rgb(242,80,34);
		   			float:left;
		   }
		   
		   
		   /*底部div*/
		   .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>

在这里插入图片描述