我们讲解下在手机端制作通讯录功能，我们先把前端页面写好，然后数据直接从数据库提取出来。对于项目中有这样需要的可以拿去借鉴
我们看看页面效果
代码如下
<!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">
.ui-grid-b .ui-block-a { width: 25%; }
.ui-grid-b .ui-block-b { width: 50%; }
.ui-grid-b .ui-block-c { width: 25%; }
.ui-bar-c { height: 60px; }
.ui-bar-c h1 {
font-size: 20px;
line-height: 26px;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="content">
<fieldset class="ui-grid-b">
<div class="ui-block-a">
<div class="ui-bar ui-bar-c"> <img src="//freemuban.com/js/517/b1.jpg" height="100%" /> </div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<h1>张三</h1>
<p>13522221111</p>
</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-c"> <img src="//freemuban.com/js/517/b2.png" height="100%" /> </div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-c"> <img src="//freemuban.com/js/517/b2.jpg" height="100%" /> </div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<h1>李四</h1>
<p>13522221112</p>
</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-c"> <img src="//freemuban.com/js/517/b1.png" height="100%" /> </div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-c"> <img src="//freemuban.com/js/517/b3.jpg" height="100%" /> </div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<h1>王五</h1>
<p>13522221113</p>
</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-c"> <img src="//freemuban.com/js/517/b1.png" height="100%" /> </div>
</div>
</fieldset>
</div>
</div>
</body>
</html>
