电子书效果（章节+翻页）-html代码-BFW代码库

电子书效果（章节+翻页）

代码语言：html

所属分类：其他

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻书效果</title>
   <style>
       @charset "UTF-8";
/*reset start*/
*,ul.dl,ol,h1,h2,h3,h4,h5,h6,p{margin:0;padding:0;}
html{font-family:'PingFang SC'; -webkit-font-smoothing: antialiased;}
a{text-decoration:none;  color:#2a2a2a;}
strong,b,h1,h2,h3,h4,h5,h6{ font-weight:normal;}
i,em{font-style:normal;}
a img{border:0;}
li{list-style:none;  }
.clearfix:after{display:block; content:''; clear:both;}
.clearfix{zoom:1;}
.fl{float:left;}
.fr{float:right;}
table{border-collapse:collapse;}
th,td{border:none; padding:0;}
/*input,textarea{outline:none; -webkit-appearance: none;}*/
img{border:none;}
input{outline:medium;}
input, textarea, select, button { font-family:'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;}

.page_d{width:566px; height:776px; background:url(http://repo.bfw.wiki/bfwrepo/image/book/page_d.jpg) no-repeat;}
.back_catalog{width:213px; height:67px; position:absolute; top:-84px; color:#7c6a20; text-align:center; line-height: 58px; background:url(http://repo.bfw.wiki/bfwrepo/image/book/back.png) no-repeat; font-size:22px; right:54px;}

.banner_title{width:664px; height:254px; background:url(http://repo.bfw.wiki/bfwrepo/image/book/title.png) no-repeat; position:absolute; left:50%; margin-left:-332px; top:107px;}
.book_box{position:absolute; left:50%; top:100px; margin-left:-593px; width:1186px; height:820px; background:url(http://repo.bfw.wiki/bfwrepo/image/book/shu.jpg) no-repeat;}
.book_box .book_content{width:1121px; height:776px; position:absolute; left:33px; top:17px; z-index:9999;}

.bookmark{position:absolute; top:129px; left:0;}
.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:.........完整代码请登录后点击上方下载按钮下载查看