如何通过jquery mobile制作九宫格

2025-04-15 13:11:10

推荐回答（1个）

回答1：

index.html页面代码如下：
Html代码  
   
   
  
      
      
    jQuery Mobile Examples - JQM Gallery   
      
      
      
      
      
      
    
  
          
            业务管理

故障管理

工单管理

资产属性

资产状态

资产看板

故障上报

备品备件

采购申请

css样式代码如下：
Js代码
.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;
}