<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css" />
<style>
.liwid>li {
border: none !important;
margin-bottom: 2px !important;
}
</style>
</head>
<body>
<div data-role="page" id="mail">
<div data-role="panel" id="cai">
<ul class="ui-grid-d">
<a data-icon="info"></a>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<div data-role="header">
<a href="#cai" class="ui-btn ui-corner-all ui-icon-user ui-btn-icon-notext"></a>
<h3>消息</h3>
<a href="#" class="ui-btn ui-corner-all ui-icon-plus ui-btn-icon-notext"></a>
</div>
<div data-role="main" class="ui-content">
<input type="search" name="search">
</div>
<div data-role="content">
<div data-role="main" class="ui-content">
<ul data-role="listview" class="liwid">
<li>
<a href="#"><img src="img/QQTX.jpg">
<h2>小科</h2>
<p>000</p>
<span class="ui-li-count">25</span></a>
</li>
<li>
<a href="#"><img src="img/QQTX.jpg">
<h2>user</h2>
<p>000</p>
<span class="ui-li-count">12</span></a>
</li>
<li>
<a href="#"><img src="img/QQTX.jpg">
<h2>user</h2>
<p>000</p>
<span class="ui-li-count">5</span></a>
</li>
</ul>
</div>
</div>
<div data-role="footer" data-position="fixed" data-fullscreen="false">
<div data-role="navbar">
<ul>
<li>
<a href="#mail" data-icon="comment" data-transition="none">消息</a>
</li>
<li>
<a href="#first" data-icon="user" data-transition="none">好友</a>
</li>
<li>
<a href="#star" data-icon="star" data-transition="none">动态</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="first">
<div data-role="panel" id="cai2">
<ul class="ui-grid-d">
<a data-icon="info"></a>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<div data-role="header">
<a href="#cai2" class="ui-btn ui-corner-all ui-icon-user ui-btn-icon-notext"></a>
<h3>好友列表</h3>
<a href="#" class="ui-btn ui-corner-all ui-btn-icon-notext">添加</a>
</div>
<div data-role="main" class="ui-content">
<input type="search" name="search">
</div>
<div data-role="content">
<div data-role="navbar" data-position="inline">
<ul>
<li>好友</li>
<li>群组</li>
<li>多人聊天</li>
<li>设备</li>
<li>通讯录</li>
</ul>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsibleset">
<div data-role="collapsible" data-collapsed-icon="carat-u" data-expanded-icon="carat-d">
<h3>我的好友 <span> 8/90</span></h3>
<p>好友</p>
</div>
<div data-role="collapsible" data-collapsed-icon="carat-u" data-expanded-icon="carat-d">
<h3>我的好友 <span> 8/90</span></h3>
<p>好友</p>
</div>
<div data-role="collapsible" data-collapsed-icon="carat-u" data-expanded-icon="carat-d">
<h3>我的好友 <span> 8/90</span></h3>
<p>好友</p>
</div>
<div data-role="collapsible" data-collapsed-icon="carat-u" data-expanded-icon="carat-d">
<h3>我的好友 <span> 8/90</span></h3>
<p>好友</p>
</div>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed" data-fullscreen="false">
<div data-role="navbar">
<ul>
<li>
<a href="#mail" data-icon="comment" data-transition="none">消息</a>
</li>
<li>
<a href="#first" data-icon="user" data-transition="none">好友</a>
</li>
<li>
<a href="#star" data-icon="star" data-transition="none">动态</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="star">
<div data-role="panel" id="cai3">
<ul class="ui-grid-d">
<a data-icon="info"></a>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<div data-role="header">
<a href="#cai3" class="ui-btn ui-corner-all ui-icon-user ui-btn-icon-notext"></a>
<h3>动态</h3>
<a href="#" class="ui-btn ui-corner-all ui-btn-icon-notext">更多</a>
</div>
<div data-role="main" class="ui-content">
<input type="search" name="search">
<div data-role="navbar">
<ul>
<li>
<a href="#" data-icon="star" data-transition="none">好友动态</a>
</li>
<li>
<a href="#" data-icon="location" data-transition="none" >附近</a>
</li>
<li>
<a href="#" data-icon="cloud" data-transition="none" >兴趣部落</a>
</li>
</ul>
</div>
</div>
<div data-role="content">
<div data-role="main" class="ui-content">
<ul data-role="listview" class="liwid">
<li>
<a href="#"><img src="img/QQTX.jpg">
<h2>京东购物</h2>
</a>
</li>
<li>
<a href="#"><img src="img/QQTX.jpg">
<h2>阅读</h2>
</a>
</li>
<li>
<a href="#"><img src="img/QQTX.jpg">
<h2>动漫</h2>
</a>
</li>
</ul>
</div>
</div>
<div data-role="footer" data-position="fixed" data-fullscreen="false">
<div data-role="navbar">
<ul>
<li>
<a href="#mail" data-icon="comment" data-transition="none" data-iconpos="left">消息</a>
</li>
<li>
<a href="#first" data-icon="user" data-transition="none">好友</a>
</li>
<li>
<a href="#star" data-icon="star" data-transition="none">动态</a>
</li>
</ul>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
</html>
