我们讲解下在手机端制作九宫格效果，九宫格经常在手机端首页和APP首页里面遇到，怎么制作呢
我们看看页面效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/517/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/517/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/517/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/517/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
</script>
<style type="text/css"></style>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<a href="#">返回</a>
<h1>九宫格界面</h1>
<a href="#">设置</a>
</div>
<div data-role="content">
<fieldset class="ui-grid-b">
<div class="ui-block-a">
<img src="//freemuban.com/js/517/1.png" width="100%" height="100%"/>
</div>
<div class="ui-block-b">
<img src="//freemuban.com/js/517/2.png" width="100%" height="100%"/>
</div>
<div class="ui-block-c">
<img src="//freemuban.com/js/517/3.png" width="100%" height="100%"/>
</div>
<div class="ui-block-a">
<img src="//freemuban.com/js/517/4.png" width="100%" height="100%"/>
</div>
<div class="ui-block-b">
<img src="//freemuban.com/js/517/5.png" width="100%" height="100%"/>
</div>
<div class="ui-block-c">
<img src="//freemuban.com/js/517/6.png" width="100%" height="100%"/>
</div>
<div class="ui-block-a">
<img src="//freemuban.com/js/517/7.png" width="100%" height="100%"/>
</div>
<div class="ui-block-b">
<img src="//freemuban.com/js/517/8.png" width="100%" height="100%"/>
</div>
<div class="ui-block-c">
<img src="//freemuban.com/js/517/9.png" width="100%" height="100%"/>
</div>
</fieldset>
</div>
</div>
</body>
</html>
