<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery mobile</title>
<!-- meta使用viewport以确保页面可自由缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入 jQuery Mobile 样式 -->
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- 引入 jQuery 库 -->
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="css/hyj.css">
<!-- 引入 jQuery Mobile 库 -->
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<script>
$(function () {
$(".recommend_nav").click(function () {
$(".recommend").removeClass("hidden");
$(".recommend").siblings("div").addClass("hidden");
});
$(".hot_nav").click(function () {
$(".hot").removeClass("hidden");
$(".hot").siblings("div").addClass("hidden");
});
$(".newbook_nav").click(function () {
$(".newbook").removeClass("hidden");
$(".newbook").siblings("div").addClass("hidden");
});
$(".total").click(function () {
$("#booklist_total").removeClass("hidden");
$("#booklist_total").siblings("div").addClass("hidden");
});
$(".total").trigger("click");
$(".politics").click(function () {
$("#booklist_politics").removeClass("hidden");
$("#booklist_politics").siblings("div").addClass("hidden");
});
$(".literature").click(function () {
$("#booklist_literature").removeClass("hidden");
$("#booklist_literature").siblings("div").addClass("hidden");
});
$(".technology").click(function () {
$("#booklist_technology").removeClass("hidden");
$("#booklist_technology").siblings("div").addClass("hidden");
});
});
</script>
<body>
<div data-role="page" id="shouye" style="background-image: url(image/bg.png);">
<div data-role="header" >
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#shouye" class="ui-btn-active" data-icon="home">主页</a></li>
<li><a href="#shouye1">推荐</a></li>
<li><a href="#shouye4">图书</a></li>
<li><a href="#shouye3">资讯</a></li>
<li><a href="#shouye2">排行榜</a></li>
</ul>
</div>
</div>
<div data-role="content" class="content" style="background-image: url(image/bg1.png);">
<h1>云图书馆</h1>
</div>
<div data-role="footer" style="background-image: url(image/f_bg.png);">
<form class="ui-filterable" style="display: flex;">
<div data-role="panel" id="myPanel" data-display="overlay">
<p style="font-size: x-large; color: blue; text-align: center;">menu</p>
<ul style="margin-left: 30px;" >
<li style=" padding-top: 5px;"> <a href="#shouye1" class="ui-btn-active" data-icon="home">推荐</a></li>
<li style=" padding-top: 5px;"> <a href="#shouye4">图书</a></li>
<li style=" padding-top: 5px;"> <a href="#shouye2">排行榜</a></li>
<li style=" padding-top: 5px;"> <a href="#shuoye3">资讯</a></li>
<li style=" padding-top: 5px;"> <a href="#">活动</a></li>
</ul>
</div>
<div data-role="main" class="ui-content" >
<a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">打开菜单</a>
</div>
<input style="display: flex; width: 200px;" height="60px" class="search" id="myFilter" data-type="search">
<div data-role="navbar" style="display: flex;margin-top: 13px;margin-left: 20px; ">
<ul>
<li><a href="#" data-icon="search" style="width: 50px; text-align: center;">搜索</a></li>
</ul>
</div>
</form>
<div data-role="main" class="ui-content" style="background-image: url(image/f_bg.png);">
<div class="ui-grid-b ui-responsive">
<div class="ui-block-a" style="margin-top: 50px;">
<a href="#" class="ui-btn ui-corner-all ui-shadow">好书推荐</a><br>
<span>《长征路上的扶贫人》、《天边的云彩》、《江年》</span>
</div>
<div class="ui-block-b" style="margin-top: 50px;">
<a href="#" class="ui-btn ui-corner-all ui-shadow">一周热门</a><br>
<span >《图说孙子兵法》、《民法典必修课》、《图解唐宋八大家》</span>
</div>
<div class="ui-block-c" style="margin-top: 50px;">
<a href="#" class="ui-btn ui-corner-all ui-shadow">最新上架</a><br>
<span >《成都城市史》、《温润的时光》、《黄虎张献忠》</span>
</div>
</div>
<h1 style="text-align: center;">证照信息</h1>
<div data-role="collapsibleset" id="group-img" style="text-align: center;">
<div data-role="collapsible">
<h3>营业执照</h3>
<p>仅供学习使用</p>
<img src="images/营业执照.jpg">
</div>
<div data-role="collapsible">
<h3>增值电信业务许可证</h3>
<p>仅供学习使用</p>
<img src="images/电信业务许可证.jpg">
</div>
<div data-role="collapsible">
<h3>电子出版物许可证</h3>
<p>仅供学习使用</p>
<img src="images/电子出版物许可证.jpg">
</div>
<div data-role="collapsible">
<h3>网络文化许可证</h3>
<p>仅供学习使用</p>
<img src="images/网络文化许可证.jpg">
</div>
<div data-role="collapsible">
<h3>更多信息</h3>
<a href="https://zwfw.samr.gov.cn/needSearch">点此查询</a>
</div>
</div>
</div>
<div style=" text-align: center;" data-role="main" class="ui-content">
<a href="#shouye1" class="ui-btn ui-corner-all ui-icon-arrow-d ui-btn-icon-notext">图标</a>
<a href="#shouye" class="ui-btn ui-corner-all ui-icon-home ui-btn-icon-notext">图标</a>
</div>
</div>
</div>
<div data-role="page" id="shouye1" style="background-image: url(image/bg.png);">
<div data-role="header">
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#shouye" class="ui-btn-active" data-icon="home">主页</a></li>
<li><a href="#shouye1">推荐</a></li>
<li><a href="#shouye4">图书</a></li>
<li><a href="#shouye3">资讯</a></li>
<li><a href="#shouye2">排行榜</a></li>
</ul>
</div>
</div>
<div data-role="main" class="ui-content">
<h1 style="text-align: center;">好书推荐</h1>
<div class="ui-grid-b">
<div class="ui-block-a" style="margin-left: 10px;">
<img style="width: 100%;" src="image/changzheng.png">
<a href="#imformation1" data-rel="popup" data-position-to="window">
<p>《长征路上的扶贫人》</p></a>
<p>作者：扎西措著</p>
<div data-role="popup" id="imformation1">
<a href="#shouye1" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="image/imf1.png" style="width:800px;height:400px;" alt="Skaret View">
</div>
</div>
<div class="ui-block-b" style="margin-left: 75px; margin-top: 15px;">
<img style="width: 100%;" style="width: 100%;" src="image/xiangtu.png">
<a href="#imformation2" data-rel="popup" data-position-to="window">
<p>《乡土中国》</p></a>
<p>作者：费孝通</p>
<div data-role="popup" id="imformation2">
<a href="#shouye1" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="image/imf2.png" style="width:800px;height:400px;" alt="Skaret View">
</div>
</div>
</div>
<div class="ui-grid-b">
<div class="ui-block-a" style="margin-left: 10px;">
<img style="width: 100%;" src="image/gushu.png">
<a href="#imformation3" data-rel="popup" data-position-to="window">
<p>《古蜀金沙》</p></a>
<p>作者：黄剑华</p>
<div data-role="popup" id="imformation3">
<a href="#shouye1" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="image/imf3.png" style="width:800px;height:400px;" alt="Skaret View">
</div>
</div>
<div class="ui-block-b" style="margin-left: 75px; margin-top: 15px;">
<img style="width: 100%;" src="image/寻亲.png">
<a href="#imformation4" data-rel="popup" data-position-to="window">
<p>《中国寻亲者》</p></a>
<p>作者：马超英</p>
<div data-role="popup" id="imformation4">
<a href="#shouye1" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="image/imf4.png" style="width:800px;height:400px;" alt="Skaret View">
</div>
</div>
</div>
<div class="ui-grid-b">
<div class="ui-block-a" style="margin-left: 10px;">
<img style="width: 100%;" src="image/yuncai.png">
<a href="#imformation5" data-rel="popup" data-position-to="window"><p>《天边的云彩》</p></a>
<p>作者：赵振元</p>
<div data-role="popup" id="imformation5">
<a href="#shouye1" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="image/imf5.png" style="width:800px;height:400px;" alt="Skaret View">
</div>
</div>
<div class="ui-block-b" style="margin-left: 75px; margin-top: 15px;">
<img style="width: 100%;" src="image/wangyan.png">
<a href="#imformation6" data-rel="popup" data-position-to="window"><p>《望雁行》</p></a>
<p>作者：何华</p>
<div data-role="popup" id="imformation6">
<a href="#shouye1" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="image/imf6.png" style="width:800px;height:400px;" alt="Skaret View">
</div>
</div>
</div>
</div>
<div data-role="footer">
<div style=" text-align: center;" data-role="main" class="ui-content">
<a href="#shouye" class="ui-btn ui-corner-all ui-icon-arrow-u ui-btn-icon-notext">图标</a>
<a href="#shouye2" class="ui-btn ui-corner-all ui-icon-arrow-d ui-btn-icon-notext">图标</a>
<a href="#shouye" class="ui-btn ui-corner-all ui-icon-home ui-btn-icon-notext">图标</a>
</div>
</div>
</div>
<div data-role="page" id="shouye2" style="background-image: url(image/bg1.png);">
<div data-role="header">
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#shouye" class="ui-btn-active" data-icon="home">主页</a></li>
<li><a href="#shouye1">推荐</a></li>
<li><a href="#shouye4">图书</a></li>
<li><a href="#shouye3">资讯</a></li>
<li><a href="#shouye2">排行榜</a></li>
</ul>
</div>
</div>
<div data-role="main" class="ui-content">
<h2 style="text-align: center; color: blue;">热书排行榜</h2>
<ul data-role="listview" data-inset="true">
<li data-role="divider">点赞排行榜</li>
<li>
<a href="#" >
<img style="margin-left: 20px;" src="image/dianzan1.png">
<h2>《你必须精力饱满》</h2>
<p>罗金著</p>
</a>
<a href="#download" data-transition="pop" data-icon="carat-d"></a>
</li>
<li>
<a href="#">
<img style="margin-left: 20px;" src="image/dianzan2.png">
<h2>《人间失格》</h2>
<p>(日)太宰治著</p>
</a>
<a href="#download" data-transition="pop" data-icon="carat-d"></a>
</li>
<li>
<a href="#">
<img style="margin-left: 20px;" src="image/dianzan3.png">
<h2>《悉达多》</h2>
<p>黑塞著</p>
</a>
<a href="#download" data-transition="pop" data-icon="carat-d"></a>
</li>
</ul>
<ul data-role="listview" data-inset="true">
<li data-role="divider">推荐排行榜</li>
<li>
<a href="#" >
<img style="margin-left: 20px;" src="image/dianzan4.png">
<h2>《皇帝内经》</h2>
<p>周成著</p>
</a>
<a href="#download" data-transition="pop" data-icon="carat-d"></a>
</li>
<li>
<a href="#">
<img style="margin-left: 20px;" src="image/dianzan5.png">
<h2>《C Primer Plus》</h2>
<p>普拉达著</p>
</a>
<a href="#download" data-transition="pop" data-icon="carat-d"></a>
</li>
<li>
<a href="#">
<img style="margin-left: 20px;" src="image/dianzan6.png">
<h2>《江南十七夏》</h2>
<p>玖月晞著</p>
</a>
<a href="#download" data-transition="pop" data-icon="carat-d"></a>
</li>
</ul>
<ul data-role="listview" data-inset="true">
<li data-role="divider">借阅排行榜</li>
<li>
<a href="#" >
<img style="margin-left: 20px;" src="image/dianzan7.png">
<h2>《中华成语故事》</h2>
<p>邓敏华著</p>
</a>
<a href="#download" data-transition="pop" data-icon="carat-d"></a>
</li>
<li>
<a href="#">
<img style="margin-left: 20px;" src="image/dianzan8.png">
<h2>《悲惨世界》</h2>
<p>雨果著</p>
</a>
<a href="#download" data-transition="pop" data-icon="carat-d"></a>
</li>
<li>
<a href="#">
<img style="margin-left: 20px;" src="image/dianzan9.png">
<h2>《失落的桃符》</h2>
<p>御风楼主人著</p>
</a>
<a href="#download" data-transition="pop" data-icon="carat-d"></a>
</li>
</ul>
<ul data-role="listview" data-inset="true">
<li data-role="divider">阅读排行榜</li>
<li>
<a href="#" >
<img style="margin-left: 20px;" src="image/dianzan10.png">
<h2>《青草的骨头》</h2>
<p>常新港著</p>
</a>
<a href="#download" data-transition="pop" data-icon="carat-d"></a>
</li>
<li>
<a href="#">
<img style="margin-left: 20px;" src="image/dianzan11.png">
<h2>《我的阿勒泰》</h2>
<p>李娟著</p>
</a>
<a href="#download" data-transition="pop" data-icon="carat-d"></a>
</li>
<li>
<a href="#">
<img style="margin-left: 20px;" src="image/dianzan12.png">
<h2>《瓦尔纳宝典》</h2>
<p>乔根森著</p>
</a>
<a href="#download" data-transition="pop" data-icon="carat-d"></a>
</li>
</ul>
</div>
<div data-role="footer">
<div style=" text-align: center;" data-role="main" class="ui-content">
<a href="#shouye1" class="ui-btn ui-corner-all ui-icon-arrow-u ui-btn-icon-notext">图标</a>
<a href="#shouye3" class="ui-btn ui-corner-all ui-icon-arrow-d ui-btn-icon-notext">图标</a>
<a href="#shouye" class="ui-btn ui-corner-all ui-icon-home ui-btn-icon-notext">图标</a>
</div>
</div>
</div>
<div data-role="page" id="shouye3" style="background-image: url(image/bg.png);">
<div data-role="header" >
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#shouye" class="ui-btn-active" data-icon="home">主页</a></li>
<li><a href="#shouye1">推荐</a></li>
<li><a href="#shouye4">图书</a></li>
<li><a href="#shouye3">资讯</a></li>
<li><a href="#shouye2">排行榜</a></li>
</ul>
</div>
</div>
<h1 style="color: red; text-align: center;">热点资讯</h1>
<div style="display: flex; margin-left: 20px; height: 60px;">
<input style="display: flex; width: 300px; " height="60px" class="search" id="myFilter" data-type="search">
<div data-role="navbar" style="display: flex;margin-top: 13px;margin-left: 20px; ">
<ul>
<li><a href="#" data-icon="search" style="width: 50px; text-align: center; margin-bottom: 30px; height: 20px;">搜索</a></li>
</ul>
</div>
</div>
<div data-role="main" class="ui-content">
<div class="ui-grid-b">
<img style="width: 100%;" src="image/zixun1.png">
<h3>好书推荐｜｜万物复“书”，一起“悦”读</h3>
<p>精读一本好书，点亮一盏心灯。习惯闲时翻出一本书，细细品味，或跌宕起伏，或平淡无奇。旧书不厌百回读，熟读深思子自知。一些经典的好书，需要反复读才能参透其中的精妙，读的次数越多，...</p>
<p>云图书馆平台</p>
<p>20240422 11:05</p>
<img style="width: 100%;" src="image/zixun2.png">
<h3>图情研论｜｜公共图书馆在引导青少年信息素质教育中的作用</h3>
<p>吐鲁番图书馆（图片选自网络与本文内容无关）编者提示为拓展专业研究思路，此处以文摘方式推荐更多平台渠道所发表的一些看法观点，仅供思考与讨论，不作他用。公共图书馆在引导青少年信息...</p>
<p>云图书馆平台</p>
<p>20231211 09:23</p>
<img style="width: 100%;" src="image/zixun3.png">
<h3>“粽”点阅读-端午佳节至书香伴粽香</h3>
<p>端午节与春节、清明节、中秋节并称为中国四大传统节日。端午文化在世界上影响广泛，世界上一些别的国家和地区也有庆贺端午的活动。端午节对于传承与弘扬非物质文化有着重要意义，在这个端......</p>
<p>云图书馆平台</p>
<p>20230621 10:06</p>
</div>
</div>
<div data-role="footer">
<div style=" text-align: center;" data-role="main" class="ui-content">
<a href="#shouye2" class="ui-btn ui-corner-all ui-icon-arrow-d ui-btn-icon-notext">图标</a>
<a href="#shouye" class="ui-btn ui-corner-all ui-icon-home ui-btn-icon-notext">图标</a>
</div>
</div>
</div>
<div data-role="page" id="shouye4">
<div data-role="header">
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#shouye" class="ui-btn-active" data-icon="home">主页</a></li>
<li><a href="#shouye1">推荐</a></li>
<li><a href="#shouye4">图书</a></li>
<li><a href="#shouye3">资讯</a></li>
<li><a href="#shouye2">排行榜</a></li>
</ul>
</div>
</div>
<div data-role="content">
<!-- <div data-role="controlgroup" data-type="horizontal" class="ui-grid-a" style="margin-top: -10px;"> -->
<form>
<div class="ui-block-a" style="width: 70%;">
<input data-type="search" id="book_search" placeholder="请输入关键字">
</div>
<div class="ui-block-b" style="width: 30%;">
<a href="#search_popup" data-rel="popup" class="ui-btn ui-mini ui-icon-grid ui-btn-icon-right"
style="margin-top: 25px;display: inline-block;">高级搜索</a>
</div>
</form>
<!-- </div> -->
<!-- 高级查询弹窗 -->
<div data-role="popup" id="search_popup" class="ui-content" style="min-width: 250px;">
<form>
<div>
<h3>请选择您要查询的内容</h3>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>请选择图书种类：</legend>
<label for="search_total">全部</label>
<input type="checkbox" name="search_label" id="search_total">
<label for="search_politics">政法</label>
<input type="checkbox" name="search_label" id="search_politics" value="政法">
<label for="search_literature">文学</label>
<input type="checkbox" name="search_label" id="search_literature" value="文学">
<label for="search_technology">工业技术</label>
<input type="checkbox" name="search_label" id="search_technology" value="工业技术">
</fieldset>
</div>
</div>
<fieldset data-role="collapsible">
<form>
<fieldset data-role="fieldcontain">
<label for="book_style">选择图书风格</label>
<select id="book_style">
<option value="none" checked>无倾向</option>
<option value="male">男性向</option>
<option value="female">女性向</option>
</select>
</fieldset>
</form>
<legend>有关书籍信息查询请点这里</legend>
<label for="search_name">书名:</label>
<input type="text" name="text" id="search_name">
<label for="search_author">注译者:</label>
<input type="text" name="text" id="search_author">
<label for="search_publication">出版社:</label>
<input type="text" name="text" id="search_publication">
<label for="search_time">出版时间:</label>
<input type="date" name="text" id="search_time">
<input type="submit" data-inline="true" value="查询">
</fieldset>
</form>
</div>
<!-- 左侧导航栏 -->
<!-- <div class="ui-grid-a" style="margin-top: 50px;"> -->
<div class="ui-block-a" style="margin-top: 12px;">
<ul data-role="listview">
<li data-icon="false"><a href="#booklist_total" class="total">全部</a></li>
<li data-icon="false"><a href="#booklist_recommend" class="politics">政法</a></li>
<li data-icon="false"><a href="#booklist_literature" class="literature">文学</a></li>
<li data-icon="false"><a href="#booklist_technology" class="technology">工业技术</a></li>
</ul>
</div>
<div class="ui-block-b">
<!-- <div data-role="controlgroup" data-type="horizontal"> -->
<ul id="booklist_nav">
<li><a href="#" class="recommend_nav ">好书推荐</a></li>
<li style="margin-left: 10px;"><a href="#" class="hot_nav">一周热门</a></li>
<li style="margin-left: 10px;"><a href="#" class="newbook_nav">最新上架</a></li>
</ul>
<!-- 这是全部书籍列表 -->
<div data-role="content" id="booklist_total">
<div class="recommend">
<!-- 这是推荐书籍 -->
<ul data-role="listview" data-filter="true" data-input="#book_search">
<li data-icon="false">
<a href="#total_book1">
<img src="images/活着.jpg"><span class="bookname_span">活着</span><br><span
class="author_span">作者：余华</span><br><span
class="author_span">出版社：北京十月文艺出版社</span>
</a>
</li>
<li data-icon="false">
<a href="#total_book2">
<img src="images/沉默的大多数.jpg"><span class="bookname_span">沉默的大多数</span><br><span
class="author_span">作者：王小波</span><br><span
class="author_span">出版社：北京十月文艺出版社</span>
</a>
</li>
<li data-icon="false">
<a href="#total_book3">
<img src="images/人类简史.jpg"><span class="bookname_span">人类简史</span><br><span
class="author_span">作者：尤瓦尔·赫拉利</span><br><span
class="author_span">出版社：中信出版股份有限公司</span>
</a>
</li>
<li data-icon="false">
<a href="#total_book4">
<img src="images/白鹿原.jpg"><span class="bookname_span">白鹿原</span><br><span
class="author_span">作者：陈忠实</span><br><span
class="author_span">出版社：太白文艺出版社</span>
</a>
</li>
<li data-icon="false">
<a href="#total_book5">
<img src="images/许三观卖血记.jpg"><span class="bookname_span">许三观卖血记</span><br><span
class="author_span">作者：余华</span><br><span class="author_span">出版社：江苏文艺出版社</span>
</a>
</li>
<li data-icon="false">
<a href="#total_book6">
<img src="images/百年孤独.jpg"><span class="bookname_span">百年孤独</span><br><span
class="author_span">作者：加夫列尔·加西亚·马尔克斯</span><br><span
class="author_span">出版社：南海出版社</span>
</a>
</li>
<li data-icon="false">
<a href="#total_book7">
<img src="images/中国的男人和女人.jpg"><span class="bookname_span">中国的男人和女人</span><br><span
class="author_span">作者：易中天</span><br><span
class="author_span">出版社：上海文艺出版社</span>
</a>
</li>
<li data-icon="false">
<a href="#total_book8">
<img src="images/给青年的十二封信.jpg"><span class="bookname_span">给青年的十二封信</span><br><span
class="author_span">作者：朱光潜</span><br><span class="author_span">出版社：中华书局</span>
</a>
</li>
<li data-icon="false">
<a href="#total_book9">
<img src="images/权威的理由.jpg"><span class="bookname_span">权威的理由</span><br><span
class="author_span">作者：刘擎</span><br><span class="author_span">出版社：新星出版社</span>
</a>
</li>
<li data-icon="false">
<a href="#total_book10">
<img src="images/深入理解计算机系统.jpg"><span
class="bookname_span">深入理解计算机系统</span><br><span class="author_span">作者：Randal
E.Bryant</span><br><span class="author_span">出版社：机械工业出版社</span>
</a>
</li>
<li data-icon="false">
<a href="#total_book11">
<img src="images/黑客与画家.jpg"><span class="bookname_span">黑客与画家</span><br><span
class="author_span">作者：Paul Graham</span><br><span
class="author_span">出版社：人民邮电出版社</span>
</a>
</li>
</ul>
</div>
<div class="hot hidden">
<!-- 这是热门书籍 -->
<ul data-role="listview" data-filter="true" data-input="#book_search">
<li data-icon="false">
<a href="#total_book1">
<img src="images/活着.jpg"><span class="bookname_span">活着</span><br><span
class="author_span">作者：余华</span><br><span
class="author_span">出版社：北京十月文艺出版社</span>
</a>
</li>
<li data-icon="false">
<a href="#total_book3">
<img src="images/人类简史.jpg"><span class="bookname_span">人类简史</span><br><span
class="author_span">作者：尤瓦尔·赫拉利</span><br><span
class="author_span">出版社：中信出版股份有限公司</span>
</a>
</li>
<li data-icon="false">
<a href="#total_book4">
<img src="images/白鹿原.jpg"><span class="bookname_span">白鹿原</span><br><span
class="author_span">作者：陈忠实</span><br><span
class="author_span">出版社：太白文艺出版社</span>
</a>
</li>
</ul>
</div>
<div class="newbook hidden">
<!-- 这是新书 -->
<ul data-role="listview" data-filter="true" data-input="#book_search">
<li data-icon="false">
<a href="#book1">
<img src="images/沉默的大多数.jpg"><span class="bookname_span">沉默的大多数</span><br><span
class="author_span">作者：王小波</span><br><span
class="author_span">出版社：北京十月文艺出版社</span>
</a>
</li>
</ul>
</div>
</div>
<!-- 这是政法类书籍 -->
<div data-role="content" id="booklist_politics">
<div class="recommend">
<ul data-role="listview" data-filter="true" data-input="#book_search">
<li data-icon="false">
<a href="#total_book7">
<img src="images/中国的男人和女人.jpg"><span class="bookname_span">中国的男人和女人</span><br><span
class="author_span">作者：易中天</span><br><span
class="author_span">出版社：上海文艺出版社</span>
</a>
</li>
<li data-icon="false">
<a href="#total_book8">
<img src="images/给青年的十二封信.jpg"><span class="bookname_span">给青年的十二封信</span><br><span
class="author_span">作者：朱光潜</span><br><span class="author_span">出版社：中华书局</span>
</a>
</li>
<li data-icon="false">
<a href="#total_book9">
<img src="images/权威的理由.jpg"><span class="bookname_span">权威的理由</span><br><span
class="author_span">作者：刘擎</span><br><span class="author_span">出版社：新星出版社</span>
</a>
</li>
</ul>
</div>
<div class="hot hidden">
<ul data-role="listview" data-filter="true" data-input="#book_search">
<li data-icon="false">
<a href="#total_book9">
<img src="images/权威的理由.jpg"><span class="bookname_span">权威的理由</span><br><span
class="author_span">作者：刘擎</span><br><span class="author_span">出版社：新星出版社</span>
</a>
</li>
</ul>
</div>
<div class="newbook hidden">
<ul data-role="listview" data-filter="true" data-input="#book_search">
<li data-icon="false">
<a href="#"><span>暂无数据</span></a>
</li>
</ul>
</div>
</div>
<!-- 这是文学类书籍 -->
<div data-role="content" id="booklist_literature">
<div class="recommend">
<ul data-role="listview" data-filter="true" data-input="#book_search">
<li data-icon="false">
<a href="#total_book1">
<img src="images/活着.jpg"><span class="bookname_span">活着</span><br><span
class="author_span">作者：余华</span><br><span
class="author_span">出版社：北京十月文艺出版社</span>
</a>
</li>
<li data-icon="false">
<a href="#total_book2">
<img src="images/沉默的大多数.jpg"><span class="bookname_span">沉默的大多数</span><br><span
class="author_span">作者：王小波</span><br><span
class="author_span">出版社：北京十月文艺出版社</span>
</a>
</li>
<li data-icon="false">
<a href="#total_book3">
<img src="images/人类简史.jpg"><span class="bookname_span">人类简史</span><br><span
class="author_span">作者：尤瓦尔·赫拉利</span><br><span
class="author_span">出版社：中信出版股份有限公司</span>
</a>
</li>
<li data-icon="false">
<a href="#total_book4">
<img src="images/白鹿原.jpg"><span class="bookname_span">白鹿原</span><br><span
class="author_span">作者：陈忠实</span><br><span
class="author_span">出版社：太白文艺出版社</span>
</a>
</li>
<li data-icon="false">
<a href="#total_book5">
<img src="images/许三观卖血记.jpg"><span class="bookname_span">许三观卖血记</span><br><span
class="author_span">作者：余华</span><br><span class="author_span">出版社：江苏文艺出版社</span>
</a>
</li>
<li data-icon="false">
<a href="#total_book6">
<img src="images/百年孤独.jpg"><span class="bookname_span">百年孤独</span><br><span
class="author_span">作者：加夫列尔·加西亚·马尔克斯</span><br><span
class="author_span">出版社：南海出版社</span>
</a>
</li>
</ul>
</div>
<div class="hot hidden">
<ul data-role="listview" data-filter="true" data-input="#book_search">
<li data-icon="false">
<a href="#total_book1">
<img src="images/活着.jpg"><span class="bookname_span">活着</span><br><span
class="author_span">作者：余华</span><br><span
class="author_span">出版社：北京十月文艺出版社</span>
</a>
</li>
<li data-icon="false">
<a href="#total_book2">
<img src="images/沉默的大多数.jpg"><span class="bookname_span">沉默的大多数</span><br><span
class="author_span">作者：王小波</span><br><span
class="author_span">出版社：北京十月文艺出版社</span>
</a>
</li>
<li data-icon="false">
<a href="#total_book3">
<img src="images/人类简史.jpg"><span class="bookname_span">人类简史</span><br><span
class="author_span">作者：尤瓦尔·赫拉利</span><br><span
class="author_span">出版社：中信出版股份有限公司</span>
</a>
</li>
</ul>
</div>
<div class="newbook hidden">
<ul data-role="listview" data-filter="true" data-input="#book_search">
<li data-icon="false">
<a href="#total_book6">
<img src="images/百年孤独.jpg"><span class="bookname_span">百年孤独</span><br><span
class="author_span">作者：加夫列尔·加西亚·马尔克斯</span><br><span
class="author_span">出版社：南海出版社</span>
</a>
</li>
<li data-icon="false">
<a href="#total_book5">
<img src="images/许三观卖血记.jpg"><span class="bookname_span">许三观卖血记</span><br><span
class="author_span">作者：余华</span><br><span class="author_span">出版社：江苏文艺出版社</span>
</a>
</li>
</ul>
</div>
</div>
<!-- 这是工业技术类 -->
<div data-role="content" id="booklist_technology">
<div class="recommend">
<ul data-role="listview" data-filter="true" data-input="#book_search">
<li data-icon="false">
<a href="#total_book10">
<img src="images/深入理解计算机系统.jpg"><span
class="bookname_span">深入理解计算机系统</span><br><span class="author_span">作者：Randal
E.Bryant</span><br><span class="author_span">出版社：机械工业出版社</span>
</a>
</li>
<li data-icon="false">
<a href="#total_book11">
<img src="images/黑客与画家.jpg"><span class="bookname_span">黑客与画家</span><br><span
class="author_span">作者：Paul Graham</span><br><span
class="author_span">出版社：人民邮电出版社</span>
</a>
</li>
</ul>
</div>
<div class="hot hidden">
<ul data-role="listview" data-filter="true" data-input="#book_search">
<li data-icon="false">
<a href="#total_book11">
<img src="images/黑客与画家.jpg"><span class="bookname_span">黑客与画家</span><br><span
class="author_span">作者：Paul Graham</span><br><span
class="author_span">出版社：人民邮电出版社</span>
</a>
</li>
</ul>
</div>
<div class="newbook hidden">
<ul data-role="listview" data-filter="true" data-input="#book_search">
<li data-icon="false">
<a href="#"><span>暂无数据</span></a>
</li>
</ul>
</div>
</div>
</div>
<!-- </div> -->
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>
<style>
.content{
text-align: center;
color: aqua;
font-size: xx-large;
}
</style>
2206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
