<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<link rel="stylesheet" href="./css/themes/default/jquery.mobile-1.4.2.min.css" />
<style>
p span{
vertical-align:50%;
}
</style>
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="./js/simple-inheritance.min.js">
<script type="text/javascript" src="./js/code-photoswipe-1.0.11.min.js">
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-theme="b" data-role="header" data-position="fixed">
<a data-role="button" href="#page1" data-icon="arrow-l" data-iconpos="notext" data-rel="back"
class="ui-btn-left">
返回
</a>
<h3>
天气预报
</h3>
</div>
<div data-role="content" align="center">
<div class="ui-grid-b">
<div class="ui-block-a"><a class="circle_item" data-role="button" data-transition="fade" href="#page2">旅游预报</a></div>
<div class="ui-block-b"><a class="circle_item" data-role="button" data-transition="fade">农业气象</a></div>
<div class="ui-block-c"><a class="circle_item" data-role="button" data-transition="fade">交通气象</a></div>
</div>
<div class="ui-grid-b">
<div class="ui-block-a"><a class="circle_item" data-role="button" data-transition="fade">气象实况</a></div>
<div class="ui-block-b"><a class="circle_item" data-role="button" data-transition="fade">气象服务</a></div>
<div class="ui-block-c"><a class="circle_item" data-role="button" data-transition="fade">短临预报</a></div>
</div>
<div class="ui-grid-b">
<div class="ui-block-a"><a class="circle_item" data-role="button" data-transition="fade">气象视频</a></div>
<div class="ui-block-b"><a class="circle_item" data-role="button" data-transition="fade">气象咨询</a></div>
<div class="ui-block-c"><a class="circle_item" data-role="button" data-transition="fade">火险等级预报</a></div>
</div>
</div>
</div>
<!-- 旅游预报 -->
<div data-role="page" id="page2">
<div data-theme="b" data-role="header" data-position="fixed">
<a data-role="button" href="#page1" data-icon="arrow-l" data-iconpos="notext" data-rel="back"
class="ui-btn-left">
返回
</a>
<h3>
旅游景点预报
</h3>
</div>
<div data-role="content" align="center">
<ul data-role="listview" style="margin:0px 5px 0px 5px;" data-filter="true" data-filter-placeholder="关键字：城市，景点">
<li style="line-height:100%">
<a href="#page3">
<img src="img/list_item.jpg"/>
<h3>大唐芙蓉园</h3>
<p><span>建议：</span><img src="img/start.png" /></p>
</a>
</li>
</ul>
</div>
</div>
<!-- 景区天气预报 -->
<div data-role="page" id="page3">
<div data-theme="b" data-role="header" data-position="fixed">
<a data-role="button" href="#page1" data-icon="arrow-l" data-iconpos="notext" data-rel="back"
class="ui-btn-left">
返回
</a>
<h3>
大唐芙蓉园
</h3>
<div style="width: 288px; height: 100px; position: relative; background-color: #fbfbfb; border: 1px solid #b8b8b8;">
<img src="http://codiqa.com/static/images/v2/image.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -16px; margin-top: -18px">
</div>
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#page1" data-transition="fade" data-icon="" class="ui-btn-active ui-state-persist">
天气预报
</a>
</li>
<li>
<a href="#page1" data-transition="fade" data-icon="">
景区介绍
</a>
</li>
<li>
<a href="#page1" data-transition="fade" data-icon="">
景区路线
</a>
</li>
<li>
<a href="#page1" data-transition="fade" data-icon="">
特产美食
</a>
</li>
</ul>
</div>
</div>
<div data-role="content" align="center">
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="content">
<div class="ui-grid-c">
<div class="ui-block-a">
</div>
<div class="ui-block-b">
</div>
<div class="ui-block-c">
</div>
<div class="ui-block-d">
</div>
<div class="ui-block-a">
</div>
<div class="ui-block-b">
</div>
<div class="ui-block-c">
</div>
<div class="ui-block-d">
</div>
<div class="ui-block-a">
</div>
<div class="ui-block-b">
</div>
<div class="ui-block-c">
</div>
<div class="ui-block-d">
</div>
<div class="ui-block-a">
</div>
<div class="ui-block-b">
</div>
<div class="ui-block-c">
</div>
<div class="ui-block-d">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
