HTML 灵活处理网页框架

laocooon5238578862023-11-01 20:09
html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				background-color: #FF9900;
			}
		 #d1{
		 	width: 90%;
		 	height: 50px;
		 	 
		 	background-color: #8B0000;
		 	margin: 0px auto;
		 	text-align: center;
		 }
		 
		 #d2{
		 	width: 100%;
		 	height: 400px;
		 	 
		 	background-color: #00008B;
		 	margin: 0px auto;
		 	text-align: center;
		 }
		 
		 #d3{
		 	width: 100%;
		 	height: 400px;
		 	 
		 	background-color: #00BFFF;
		 	margin: 0px auto;
		 	text-align: center;
		 }
		 	#d4{
		 	width: 30%;
		 	height: 400px;		 	 
		 	background-color: #C0C6CB;
		 	margin: 0px auto;
		 	text-align: center;
		 	float:left;
		 }
		 
		 #d5{
		 	width: 65%;
		 	height: 400px;
		 	border: solid 10px red;	
		 	box-sizing: border-box;	 	 
		 	background-color: #C0C6CB;
		 	margin: 0px;
		 	text-align: center;
		 	float:left;
		 }
		 
		  #d6{
		 	width: 60%;
		 	height: 60%;
		 	
		 	box-sizing: border-box;	 	 
		 	background-color: #008000;
		 	margin: 0px;
		 	text-align: center;
		 	float:left;
		 }
		 
		 #d7{
		 	width: 39%;
		 	height: 60%;
		 	margin: 10px 0 0 0;
		 	box-sizing: border-box;	 	 
		 	background-color: #8B0000;
		 	margin: 0px;
		 	text-align: center;
		 	float:right;
		 }
		 
		 #d8{
		 	width: 100%;
		 	height: 34%;		 	
		 	box-sizing: border-box;	 	 
		 	background-color: #87CEEB;
		 	margin: 10px 0px;		 	
		 	text-align: center;
		 	float:right;
		 }
		 #d9{
		 	width: 100%;
		 	height: 50px;
		 	background-color: #008000;
		 	text-align: center;
		 		
		 }
			
		</style>
	</head>
	<body>
		 <div id=d1>
		 	导航
		 </div>
		 
		 <div id=d2>
		 	广告
		 </div>
		 <div id=d3>
		 	<div id=d4>	
		 		左盒
		 	</div>
			 <div id=d5>
				 <div id=d6>新闻</div>
				 <div id=d7>搜索</div>
				 <div id=d8>案例展示</div>
			 </div>
		 </div>
		 <div id=d9>尾部</div>
	</body>
</html>