h5标准布局

效果图

HTML5标准布局

结构代码

无标题文档



	
		HTML5页面-header
		
			
				首页
				百度
				搜狗
				nav
			
		
	

	
		section
		
			article
			header
			p标签pppppp
			footer
		
	

	aside

	footer

效果实现

无标题文档



	h3{
		background-color:#0611D5;
		padding: 15px;
		text-align: center;
	}
	nav{
		float:left;
		background-color:#5FA08F;
		width: 100%;
		margin-top:-19px;
	}
	nav ul{
		list-style-type: none;
		display:flex;
	}
	nav ul li{
		float:left;
		border: solid 2px;
		background-color: #09CCEC;
		margin-left:90px;
		padding-left:12px;
		padding-right:12px;
	}
	nav ul li a{
		color:red;
	}
	section{
		height:300px;
		width:60%;
		margin-top:10px;
		margin-left:8px;
		background-color:#0611D5;
		float:left;
	}
	aside{
		height:300px;
		width:36%;
		margin-top:10px;
		margin-right:8px;
		background-color:#0611D5;
		float:right;
	}
	article{
		height:83%;
		width:97%;
		background-color:#0611D5;
		border: solid white 1px;
		margin-left:5px;
		margin-top:10px;
		padding-top:10px;

	}
	




	HTML5页面-header
	
		
			首页
			百度
			搜狗
			nav
		
	



	section
	
		article
		header
		p标签pppppp
		footer
	


aside

footer