《jquerymobile一个容易的九宫格实现(Gallery)》由会员分享，可在线阅读，更多相关《jquerymobile一个容易的九宫格实现(Gallery)（7页珍藏版）》请在金锄头文库上搜索。
1、jquerymobile一个容易的九宫格实现(Gallery)jquerymobile一个简单的九宫格实现(Gallery)jquerymobile实现一个简单的九宫格代码如下：效果如下：index.html页面代码如下：<!DOCTYPEhtml><htmllang=en><head><metacharset=utf-8/><metaname=viewportcontent=width=device-width,initial-scale=1><title>jQueryMobileExamples-JQMGallery&
2、lt;/title><linkrel=stylesheethref=jquery.mobile/jquery.mobile-1.0.1.min.css/><linkrel=shortcuticonhref=/favicon.icotype=image/x-icon/><linkrel=stylesheethref=style.csstype=text/css/><scriptsrc=jquery.mobile/jquery-1.6.4.min></script><scriptsrc=jquery.mobile/jquery
3、.mobile-1.0.1.min.js></script></head><body><divdata-role=pagedata-theme=aid=jqm-home><divdata-role=header><h1>业务管理</h1></div><divdata-role=contentdata-theme=b><sectionclass=gallery><ulclass=gallery-entriesclearfix><liclass=galle
4、ry-item><ahref=#><imgsrc=images/shoppingcart.png/><h3>故障管理</h3></a></li><liclass=gallery-item><ahref=#><imgsrc=images/2.png/><h3>工单管理</h3></a></li><liclass=gallery-item><ahref=#><imgsrc=images/3.png/>&
5、lt;h3>资产属性</h3></a></li><liclass=gallery-item><ahref=#><imgsrc=images/4.png/><h3>资产状态</h3></a></li><liclass=gallery-item><ahref=#><imgsrc=images/5.png/><h3>资产看板</h3></a></li><liclass=gallery-i
6、tem><ahref=#><imgsrc=images/6.png/><h3>故障上报</h3></a></li><liclass=gallery-item><ahref=#><imgsrc=images/7.png/><h3>备品备件</h3></a></li><liclass=gallery-item><ahref=#><imgsrc=images/8.png/><h3>采购申请&l
7、t;/h3></a></li></ul></div></div></body></html>css样式代码如下：.clearfix:aftervisibility:hidden;display:block;content:;clear:both;.galleryfloat:left;width:100%;.gallery-entrieslist-style:none;padding:0;float:left;.gallery-entries.gallery-itemfloat:left;margin-ri
8、ght:1%;margin-bottom:2%;.gallery-entries.gallery-itemimg-webkit-box-shadow:#99903px5px;-moz-box-shadow:#99903px5px;box-shadow:#99903px5px;border:1pxsolid#fff;max-width:100%;width:80px;height:80px;.gallery-entries.gallery-itemafont-weight:normal;text-decoration:none;.gallery-entries.gallery-itemah3width:80px;white-space:nowrap;font-size:1em;overflow:hidden;text-overflow:ellipsis;padding-top:3px;align:center;.gallery-entries.gallery-itema:hoverh3,.gallery-entries.gallery-itema:activeh3text-decoration:underline;
