webAPP设置

<!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>

未修改完成

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值