上两节的文章链接地址：
将淘宝客选品库的数据导入到mysql数据库中
为淘宝客webapp网站添加广告图片
最终显示效果如下，其中首页，分类，签到，分享就是我们要说的九宫格的实现。
项目实现的环境
PHP+MYSQL+MUI+Hbuilder
首先我们打开上一节的项目，添加我们的宫格图标的样式，在我们的app.css添加如下的代码，黑体字加粗部分。
.mui-plusheader.mui-bar{
display:none;
}
.mui-plus.mui-bar-nav~.mui-content{
padding:0;
}
.hm-description{
margin:.5em0;
}
.hm-description>li{
font-size:14px;
color:#8f8f94;
}
.index.imginfo{
line-height:5em;
min-width:7em;
height:7em;
}
.index.btinfo{
margin-top:1em;
}
.itemName{
color:black;
font-size:0.9em;
}
.price{
margin-top:10px;
font-size:1em;
}
.afterprice{
color:#CF2D28;
margin-left:10px;
}
.beforeprice{
color:black;
font-size:14px;
/*//text-decoration:line-through;*/
}
.grid-icon{
border-bottom:1px#eeesolid;
background:#fff;
padding-left:0;
padding-bottom:0.5em;
}
.grid-iconspan{
width:2.5em;
height:2.5em;
background-size:100%;
margin-top:0.5em;
display:inline-block;
}
.grid-icon.mui-grid-view{
padding-right:1em;
}
.icon-001{
background-image:url(../img/001.jpg);
}
.icon-002{
background-image:url(../img/002.jpg);
}
添加后，我们在我们的首页index.php添加我们的宫格代码
这里的代码比较简单
<divclass="grid-icon">
<ulclass="mui-table-viewmui-grid-viewmui-grid-9">
<liclass="mui-table-view-cellmui-mediamui-col-xs-4mui-col-sm-3">
<ahref="#">
<spanclass="icon-001"></span>
<divclass="mui-media-body">首页</div>
</a>
</li>
<liclass="mui-table-view-cellmui-mediamui-col-xs-4mui-col-sm-3">
<ahref="#">
<spanclass="icon-002"></span>
<divclass="mui-media-body">分类</div>
</a>
</li>
<liclass="mui-table-view-cellmui-mediamui-col-xs-4mui-col-sm-3">
<ahref="#">
<spanclass="icon-001"></span>
<divclass="mui-media-body">签到</div>
</a>
</li>
<liclass="mui-table-view-cellmui-mediamui-col-xs-4mui-col-sm-3">
<ahref="#">
<spanclass="icon-001"></span>
<divclass="mui-media-body">分享</div>
</a>
</li>
</ul>
</div>
