HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习三</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div class="ui-grid-b">
<!--ui-gild后面solo\a\b\c\d分别承载1到5列-->
<div class="ui-block-a">
<div class="ui-bar ui-bar-a">主题A</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-b">主题B</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-c">主题C</div>
</div>
<!--再次加载一边，连着上面可以做出表格的效果-->
<div class="ui-block-a">
<div class="ui-bar ui-bar-a">主题A</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-b">主题B</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-c">主题C</div>
</div>
<!--不光可以承载div，也可以承载其他，就是一个容器的作用-->
<a class="ui-block-a" href="#">第一个网站</a>
<a class="ui-block-b" href="#">第二个网站</a>
<a class="ui-block-c" href="#">第三个网站</a>
</div>
<br/><br/>
<!--gird就是一个容器，可以承载不同的标签，也允许某一个位置空白，如：第一列满了，第二列没有安排也是可以的-->
<ul data-role="listview">
<li><a href="#">德鲁伊</a></li>
<li><a href="#">法师</a></li>
<li><a href="#">猎人</a></li>
<li><a href="#">圣骑士</a></li>
</ul>
<ul data-role="listview" data-filter="true">
<!--data-filter添加过滤器-->
<li><a href="#">德鲁伊</a></li>
<li><a href="#">法师</a></li>
<li><a href="#">猎人</a></li>
<li><a href="#">圣骑士</a></li>
</ul>
<br/><br/>
<from class="ui-filterable">
<input id="autoinput" data-type="search">
</from>
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-input="#autoinput">
<!--data-filter-reveal默认过滤全部，相当于隐藏，后面的是这个过滤器选择来源-->
<li><a href="#">德鲁伊</a></li>
<li><a href="#">法师</a></li>
<li><a href="#">猎人</a></li>
<li><a href="#">圣骑士</a></li>
</ul>
<!--列表默认隐藏，只有搜索出来再显示-->
<ul data-role="listview" data-autodividers="true" data-filter="true">
<!--添加自动分组，默认按照首字母-->
<li><a href="#">德鲁伊</a></li>
<li><a href="#">德玛西亚</a></li>
<li><a href="#">德邦总管</a></li>
<li><a href="#">德国</a></li>
<li><a href="#">法师</a></li>
<li><a href="#">法术猎</a></li>
<li><a href="#">法强</a></li>
<li><a href="#">猎人</a></li>
<li><a href="#">圣骑士</a></li>
</ul>
<!--按照首字母自动分类-->
</body>
</html>效果：
