<!DOCTYPE html>
<html ng-app ="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui" >
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="css/reset.css">
<style type="text/css">
html{
width: 100%;
height: 100%;
overflow-x: hidden;
}
body{
text-align: left;
width:100%;
background: #e9dfc7;
}
.m-read-content{
font-size: 14px;
color: #555;
line-height: 31px;
padding: 15px;
}
.m-read-content h4{
font-size: 20px;
color: #736357;
border-bottom:solid 1px #736357;
letter-spacing: 2px;
}
/*处理p间距缩进*/
.m-read-content p{
text-indent: 2em;
margin: 0.5em 0;
letter-spacing: 0px ;
line-height: 24px;
}
/*处理按钮*/
.u-tab{
height: 34px;/*高度,居中自动,垂直居中,圆角raduis
边距,设置字体字号,背景色,不能用red,white等,用色值,透明度*/
margin: 10px auto;
line-height: 34px;
border-radius: 8px;
border:1px solid #858382;
font-size: 12px;
background: #000 ;
opacity: 0.9;
}
.u-tab li {
/*纵向排列*/
display: inline-block;
width:49%;
border-right: 1px solid #858382;/*中间有竖线*/
text-align: center;
color:#fff;
}
.u-tab li:nth-child(2){
/*选择器处理第二个无右边框*/
border-right: none;
}
/*按钮父元素设置宽度*/
.m-button-bar {
width: 70%;
max-width: 800px;
padding:5px ;
margin: 0 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:23px;
height: 23px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJGMkEyQkQxMjdBNDExRTU4NjA2QTJDMjFDQ0I0ODhEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJGMkEyQkQyMjdBNDExRTU4NjA2QTJDMjFDQ0I0ODhEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkYyQTJCQ0YyN0E0MTFFNTg2MDZBMkMyMUNDQjQ4OEQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkYyQTJCRDAyN0E0MTFFNTg2MDZBMkMyMUNDQjQ4OEQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Ia560AAAHWklEQVR42uyd7W9U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);
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="fition_chapter_title"></div>
<div id="fiction_container" class="m-read-content">
<h4> 七皇子</h4>
<p>
若是平时,能的七皇子的青睐,他指定高兴成什么样了,可是方才他的名字已经被江旭和蒋若雪占了去了。到时候就算齐欢不该最他吗。蒋旭华也绝对会杀了图和他娘。
若是平时,能的七皇子的青睐,他指定高兴成什么样了,可是方才他的名字已经被江旭和蒋若雪占了去了。到时候就算齐欢不该最他吗。蒋旭华也绝对会杀了图和他娘。
若是平时,能的七皇子的青睐,他指定高兴成什么样了,可是方才他的名字已经被江旭和蒋若雪占了去了。到时候就算齐欢不该最他吗。蒋旭华也绝对会杀了图和他娘。
</p>
<p>
若是平时,能的七皇子的青睐,他指定高兴成什么样了,可是方才他的名字已经被江旭和蒋若雪占了去了。到时候就算齐欢不该最他吗。蒋旭华也绝对会杀了图和他娘。
若是平时,能的七皇子的青睐,他指定高兴成什么样了,可是方才他的名字已经被江旭和蒋若雪占了去了。到时候就算齐欢不该最他吗。蒋旭华也绝对会杀了图和他娘。
若是平时,能的七皇子的青睐,他指定高兴成什么样了,可是方才他的名字已经被江旭和蒋若雪占了去了。到时候就算齐欢不该最他吗。蒋旭华也绝对会杀了图和他娘。
</p>
<p>
若是平时,能的七皇子的青睐,他指定高兴成什么样了,可是方才他的名字已经被江旭和蒋若雪占了去了。到时候就算齐欢不该最他吗。蒋旭华也绝对会杀了图和他娘。
若是平时,能的七皇子的青睐,他指定高兴成什么样了,可是方才他的名字已经被江旭和蒋若雪占了去了。到时候就算齐欢不该最他吗。蒋旭华也绝对会杀了图和他娘。
若是平时,能的七皇子的青睐,他指定高兴成什么样了,可是方才他的名字已经被江旭和蒋若雪占了去了。到时候就算齐欢不该最他吗。蒋旭华也绝对会杀了图和他娘。
</p>
<p>
若是平时,能的七皇子的青睐,他指定高兴成什么样了,可是方才他的名字已经被江旭和蒋若雪占了去了。到时候就算齐欢不该最他吗。蒋旭华也绝对会杀了图和他娘。
若是平时,能的七皇子的青睐,他指定高兴成什么样了,可是方才他的名字已经被江旭和蒋若雪占了去了。到时候就算齐欢不该最他吗。蒋旭华也绝对会杀了图和他娘。
若是平时,能的七皇子的青睐,他指定高兴成什么样了,可是方才他的名字已经被江旭和蒋若雪占了去了。到时候就算齐欢不该最他吗。蒋旭华也绝对会杀了图和他娘。
</p>
<p>
若是平时,能的七皇子的青睐,他指定高兴成什么样了,可是方才他的名字已经被江旭和蒋若雪占了去了。到时候就算齐欢不该最他吗。蒋旭华也绝对会杀了图和他娘。
若是平时,能的七皇子的青睐,他指定高兴成什么样了,可是方才他的名字已经被江旭和蒋若雪占了去了。到时候就算齐欢不该最他吗。蒋旭华也绝对会杀了图和他娘。
若是平时,能的七皇子的青睐,他指定高兴成什么样了,可是方才他的名字已经被江旭和蒋若雪占了去了。到时候就算齐欢不该最他吗。蒋旭华也绝对会杀了图和他娘。
</p>
</div>
<div class="m-button-bar">
<ul class="u-tab">
<li id="prev_button">上一章</li>
<li id="next_button">下一章</li>
</ul>
</div>
<div id="bottom-nav" class="bottom-nav">
<div class="backg"></div>
<nav>
<div class="content">
<div>
</div>
</div>
<div class="content" id="content">
</div>
<div class="content">
<img src="img/night.png" alt=""><span>夜间</span>
<img src="img/night.png" alt=""><span>夜间</span>
</div>
</nav>
</div>
</div>
<script src="lib/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.οnclick=function(){
if(i%2==0){
fon.src="img/font_size2.png";
i++;
}
else if(i%2==1){
fon.src="img/font_size.png"
i++;
}
}
</script>
</body>
</html>
未修改完成