jquerymobile实现一个简单的九宫格代码如下:
效果如下:
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; }