HTML 灵活处理网页框架

这篇具有很好参考价值的文章主要介绍了HTML 灵活处理网页框架。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

HTML 灵活处理网页框架,javascript,css,前端文章来源地址https://www.toymoban.com/news/detail-721068.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>

到了这里，关于HTML 灵活处理网页框架的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！