jquerymobile 一个简单的九宫格实现（Gallery）

   jquerymobile实现一个简单的九宫格代码如下：

  效果如下：

 

 

index.html页面代码如下：

 
 

	
	
	
	
	
	
	
	
	
  

		

			
业务管理
 
		
		

			

			    
	
						

							
							
故障管理
							
						
						

							
							
工单管理
							
						
						

							
							
资产属性
							
						
						

							
							
资产状态
							
						
						

							
							
资产看板
							
						
						

							
							
故障上报
							
						
						

							
							
备品备件
							
						
						

							
							
采购申请
							
						
			
	

 

 

css样式代码如下：

.clearfix:after {
	visibility: hidden;
	display: block;
	content: "";
	clear: both;
}
.gallery{
	float: left;
	width:100%;
}


.gallery-entries{ 
	list-style:none;
	padding:0;
	float: left;
}
.gallery-entries .gallery-item{
	float: left;
	margin-right:1%;
	margin-bottom:2%;
}
.gallery-entries .gallery-item img{
	-webkit-box-shadow: #999 0 3px 5px;
	-moz-box-shadow: #999 0 3px 5px;
	box-shadow: #999 0 3px 5px;
	border: 1px solid #fff;
	max-width:100%;
	width: 80px;
	height: 80px;
}


.gallery-entries .gallery-item a{
	font-weight:normal;
	text-decoration:none;
}

.gallery-entries .gallery-item a h3{
	width:80px;
	white-space:nowrap;
	font-size:1em;
	overflow: hidden;
	text-overflow:ellipsis;
	padding-top:3px;
	align:center;
}

.gallery-entries .gallery-item  a:hover h3, .gallery-entries .gallery-item  a:active h3{
	text-decoration:underline;
}