jquerymobile一个容易的九宫格实现(Gallery)_第1页
jquerymobile一个容易的九宫格实现(Gallery)_第2页
jquerymobile一个容易的九宫格实现(Gallery)_第3页
jquerymobile一个容易的九宫格实现(Gallery)_第4页
jquerymobile一个容易的九宫格实现(Gallery)_第5页
已阅读5页，还剩2页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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;pad

人人文库> 全部分类> 行业资料 > 管理策划

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论