|
jquerymobile 一个简单的九宫格实现（Gallery） 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;
}
|
|
|
