|
|
|
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
|
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
|
|
|
<title>E_BOOK</title>
|
|
|
|
|
|
<link href="css/style.css" type="text/css" rel="stylesheet" />
|
|
|
|
|
|
<script type="text/javascript" src="js/jquery.js"></script>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<style>
|
|
|
|
|
|
.bookmark {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 129px;
|
|
|
|
|
|
left: 220px;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bookmark li {
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
width: 67px;
|
|
|
|
|
|
height: 42px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
line-height: 42px;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
border-radius: 5px 0 0 5px;
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bookmark .mark_01 {
|
|
|
|
|
|
margin-left: -34px;
|
|
|
|
|
|
background: #e53b28;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bookmark .mark_02 {
|
|
|
|
|
|
width: 106px;
|
|
|
|
|
|
margin-left: -73px;
|
|
|
|
|
|
background: #e53b28;
|
|
|
|
|
|
margin-bottom: 39px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bookmark .mark_03 {
|
|
|
|
|
|
width: 106px;
|
|
|
|
|
|
margin-left: -78px;
|
|
|
|
|
|
background: #f48c2c;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bookmark .mark_04 {
|
|
|
|
|
|
width: 106px;
|
|
|
|
|
|
margin-left: -78px;
|
|
|
|
|
|
background: #f48c2c;
|
|
|
|
|
|
margin-bottom: 39px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bookmark .mark_05 {
|
|
|
|
|
|
width: 106px;
|
|
|
|
|
|
margin-left: -84px;
|
|
|
|
|
|
background: #cadb14;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bookmark .mark_06 {
|
|
|
|
|
|
width: 106px;
|
|
|
|
|
|
margin-left: -84px;
|
|
|
|
|
|
background: #cadb14;
|
|
|
|
|
|
margin-bottom: 39px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bookmark .mark_07 {
|
|
|
|
|
|
width: 106px;
|
|
|
|
|
|
margin-left: -88px;
|
|
|
|
|
|
background: #45b3c3;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bookmark .mark_08 {
|
|
|
|
|
|
width: 106px;
|
|
|
|
|
|
margin-left: -88px;
|
|
|
|
|
|
background: #45b3c3;
|
|
|
|
|
|
margin-bottom: 39px;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="shortcut">
|
|
|
|
|
|
<div class="clr"></div>
|
|
|
|
|
|
</div><!--/ Codrops top bar -->
|
|
|
|
|
|
|
|
|
|
|
|
<div class="headeline"></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--演示内容开始-->
|
|
|
|
|
|
<link type="text/css" href="css/book.css" rel="stylesheet" />
|
|
|
|
|
|
<ul class="bookmark">
|
|
|
|
|
|
<li class="mark_01" data-id="0">首页</li>
|
|
|
|
|
|
<li class="mark_02" data-id="2">第2页</li>
|
|
|
|
|
|
<li class="mark_03" data-id="4">第3页</li>
|
|
|
|
|
|
<li class="mark_04" data-id="6">第4页</li>
|
|
|
|
|
|
<li class="mark_05" data-id="8">第5页</li>
|
|
|
|
|
|
<li class="mark_06" data-id="10">最后一页</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="book" style="margin:0 auto;">
|
|
|
|
|
|
|
|
|
|
|
|
<div class="arrow" style="left: -27px;">
|
|
|
|
|
|
<div class="mask"></div>
|
|
|
|
|
|
<div class="al" title="上一页"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="flip">
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<div class="label"></div>
|
|
|
|
|
|
<div class="content"></div>
|
|
|
|
|
|
<div class="pager"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="overlayer ie_l"><img src="images/flip_r.png" width="100%" height="627" /></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="left">
|
|
|
|
|
|
<div class="label"><a id="btn_fav" href="http://www.bootstrapmb.com/"><img src="images/favourite.jpg" />收藏</a><img src="images/vertical.jpg" /><a id="btn_down" href="#"><img src="images/download.jpg" />下载</a></div>
|
|
|
|
|
|
<div class="content">
|
|
|
|
|
|
<div class="default"><img alt="" src="images/page1.jpg" height="90%" width="90%" /><p align="center"></p></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="pager"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="right">
|
|
|
|
|
|
|
|
|
|
|
|
<div class="label">家用小家电<span>2022.06.29</span></div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="content">
|
|
|
|
|
|
<div class="default"><img src="images/page2.jpg" height="90%" width="90%" style="cursor:pointer;" onclick="$('#book .arrow .ar').click();" /></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="pager">1/3</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="foot"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="arrow" style="left:965px;">
|
|
|
|
|
|
<div class="mask"></div>
|
|
|
|
|
|
<div class="ar" title="下一页"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="js/jqueryui-1.8.min.js"></script>
|
|
|
|
|
|
<script type="text/javascript" src="js/book.js"></script>
|
|
|
|
|
|
<script type="text/javascript" src="js/page.js"></script>
|
|
|
|
|
|
<!--演示内容结束-->
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
