<!doctype html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <meta name="format-detection" content="telephone=no"> <link rel="stylesheet" type="text/css" > <style> html{ width: 100%; height: 100%; overflow-x: hidden; } body{ text-align: left; width: 100%; overflow: hidden; background-color:#e9dfc7; margin: 0px; padding: 0px; } .m-read-content{ font-size:14px; color: #555; line-height: 31px; padding: 15px; } .m-read-content h4{ font-size:20px; color: #736357; border-bottom: 1px solid #736357; letter-spacing: 2px; margin: 0 0 1em 0; } .m-read-content p{ text-indent: 2em; margin: 0.5em 0; letter-spacing: 0px; line-height: 24px; } .u-tab{ height: 34px; margin: 10px auto; line-height: 34px; border-radius: 8px; border:1px solid #858382; font-size: 12px; background: #000; opacity: 0.9; } .u-tab span{ display:inline-block; width: 49%; border-right: 1px solid #858382; text-align: center; color: #fff; } .u-tab span:nth-child(2){ border-right: none; } .m-button-bar{ width:70%; max-width: 800px; padding: 5px; margin: 0px auto; } .top-nav{ position:fixed; top: 0px; height: 50px; width: 100%; z-index: 9999; background: #000; } .icon-back{ position: absolute; top: 14px; left: 10px; width:13.3px; height: 24.8px; background: url(img/back.png); background-size: contain; } .nav-title{ position:absolute; top: 16px; left: 42px; color: #d5d5d6; } .bottom-nav{ position:fixed; bottom: 0px; height: 70px; width: 100%; z-index: 9999; color: #d5d5d6; font-size: 12px; font-weight: bold; display: flex; justify-content: center; } .backg{ position: fixed; z-index: -999; width: 100%; height: 70px; background-color: #000; opacity: 0.9; } .bottom-nav>nav{ width:85%; display: flex; align-items: center; justify-content: space-around; } .bottom-nav>nav>div>img{ height:18px; } .bottom-nav>nav>div{ display:flex; flex-direction: column; height: 70%; justify-content: space-around; cursor: pointer; } </style> <title>书城首页</title> </head> <body> <div id="root" class="container"> <div id="top-nav" class="top-nav"> <div class="icon-back"></div> <div class="nav-title">返回书架</div> </div> <div id="fiction_chapter_title"></div> <div id="fiction_container" class="m-read-content"> <h4>雨中的了悟</h4> <p> 如果雨之後还是雨 如果忧伤之後仍是忧伤 请让我从容面对这别离之後的别离 微笑地继续去寻找一个不可能再出现的 你 </p> </p> </div> <div class="m-button-bar"> <div class="u-tab"> <span id="prev_button">上一章</span><span id="next_button">下一章</span> </div> </div> <div id="bottom-nav" class="bottom-nav"> <div class="backg"></div> <nav> <div class="content"><img src="img/tree.png" alt=""><span>目录</span></div> <div class="content" id="content"><img id="font_size" src="img/font_size.png" alt=""><span>字体</span></div> <div class="content" id="content1"><img id="night" src="img/night.png" alt=""><span>夜间</span></div> </nav> </div> </div> <script src="js/zepto.js"></script> <script> window.jQuery =$; </script> <script src="js/jquery.base64.js"></script> <script src="js/jquery.jsonp.js"></script> <script> var con=document.getElementById("content"); var fon=document.getElementById("font_size"); var i=0; con.onclick=function(){ if(i%2==0){ fon.src="img/font_size2.png"; i++; } else if(i%2==1){ fon.src="img/font_size.png" i++; } } var con1=document.getElementById("content1"); var nig=document.getElementById("night"); var i=0; con.onclick=function(){ if(i%2==0){ fon.src="img/day.png"; i++; } else if(i%2==1){ fon.src="img/font_size.png" i++; } } </script> </body> </html>
添加回答
举报
0/150
提交
取消