【汇智学堂】-div+css布局十(商品管理-商品图文列表展示页面)

效果图：

我们现在主要来看轮播图下面的设计：

		   	
		   	

		   		

		   			
		   			
回收奖金一
		   		
		   		

		   			
		   			
回收奖金二
		   		
		   		

		   		     
		   			
回收奖金三
		   		

		   			
		   			
回收奖金四
		   		
		   	
		   	
		   

修改样式文件：

ul{
	list-style: none;
}

ul li{
	float: left;
}

.mainNavigation{
	position:absolute;	
	top:-25px;
	left:300px;
	/*list-style: none;*/
}


ul li img{
	width: 430px;
	height: 230px;
	padding: 15px;
}

ul li p{
	text-align: center;
}


.mainNavigation li{
	/*float:left;*/
	padding:30px;
}

修改后的html文件：

	
		
		
		
			
		
				
		
	
	
            

				

					
					合垃圾回收一站式方案
				
				

					

						

							首页
						
						

							回收人
						
						

							库管员
						
						

							产废企业

						
						

							收购人
						
						

							站长问答
						
					
					
				
			
			

				

					

						

							
						
						

							
						
						

							
						
					
				
					

					

				
			
		
		   

		   	
		   	

		   		

		   			
		   			
回收奖金一
		   		
		   		

		   			
		   			
回收奖金二
		   		
		   		

		   		     
		   			
回收奖金三
		   		

		   			
		   			
回收奖金四