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;}
联系客服
