jquerymobile 一个简单的九宫格实现(Gallery)

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

  效果如下:

 jquerymobile 一个简单的九宫格实现(Gallery)

 

index.html页面代码如下:

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Examples - JQM Gallery </title>
	<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0.1.min.css" />
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="style.css" type="text/css" />
	<script src="jquery.mobile/jquery-1.6.4.min"></script>
	<script src="jquery.mobile/jquery.mobile-1.0.1.min.js"></script>
	</head>
<body>  
<div data-role="page" data-theme="a" id="jqm-home">
		<div data-role="header">
			<h1>业务管理</h1> 
		</div>
		<div data-role="content" data-theme="b">
			<section class="gallery">
			    <ul class="gallery-entries clearfix">	
						<li class="gallery-item">
							<a href="#"><img src="images/shoppingcart.png"/>
							<h3>故障管理</h3>
							</a>
						</li>
						<li class="gallery-item">
							<a href="#"><img src="images/2.png"/>
							<h3>工单管理</h3>
							</a>
						</li>
						<li class="gallery-item">
							<a href="#"><img src="images/3.png"/>
							<h3>资产属性</h3>
							</a>
						</li>
						<li class="gallery-item">
							<a href="#"><img src="images/4.png"/>
							<h3>资产状态</h3>
							</a>
						</li>
						<li class="gallery-item">
							<a href="#"><img src="images/5.png"/>
							<h3>资产看板</h3>
							</a>
						</li>
						<li class="gallery-item">
							<a href="#"><img src="images/6.png"/>
							<h3>故障上报</h3>
							</a>
						</li>
						<li class="gallery-item">
							<a href="#"><img src="images/7.png"/>
							<h3>备品备件</h3>
							</a>
						</li>
						<li class="gallery-item">
							<a href="#"><img src="images/8.png"/>
							<h3>采购申请</h3>
							</a>
						</li>
			</ul>
	</div>
</div>
</body>
</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;
}

 

你可能感兴趣的:(jquerymobile)