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 data-role="page">
<div data-role="header">
<h2>头部</h2>
</div>
<div data-role="main">
<button>按钮</button>
<input type="button" value="按钮">
<a href="#" class="ui-btn ui-shadow">按钮</a>
<!--三种添加button的方法-->
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all"></a>
<!--ui-icon-delete表示删除的图标 notext表示按钮不能添加文本 ui-corner-all表示添加圆角-->
<a href="#" class="ui-btn ui-btn-inline">按钮1</a>
<a href="#" class="ui-btn ui-btn-inline">按钮2</a>
<a href="#" class="ui-btn ui-btn-inline">按钮3</a>
<!--按钮放置再一排，中间会有空隙-->
<div data-role="controlgroup" data-type="horizontal">
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</div>
<!--按钮中间没有空隙，形成按钮组,通过data-type将其改为横向排列-->
<a href="#" class="ui-btn ui-btn-a">a默认主题</a>
<a href="#" class="ui-btn ui-btn-b">b主题</a>
<a href="#" class="ui-btn ui-btn-c">c主题</a>
</div>
<div data-role="footer">
<h2>底部</h2>
</div>
</div>
</body>
</html>效果：
