webAPP学习设计：页面模式的设计。

最新推荐文章于 2023-08-18 13:18:17 发布
最新推荐文章于 2023-08-18 13:18:17 发布
阅读量4.9k 收藏
点赞数
分类专栏： 前端基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37727198/article/details/81512271
版权

学习webAPP视频，逐步实现阅读界面。

内容总结：首先实现下边栏模块。

先设置好dom模块的架构，在设置css样式。

知识点1：设置背景色可以利用两层div,一层是背景色，一层是内容框，覆盖并存。

<div class="bottom-nav-bk bottom_nav"></div>

            <!--下边栏内容div-->

<div class="bottom-nav bottom_nav"></div>

 

Css样式：

  /*写完dom模块的div, fixed固定位置，距离底部0px,开始写底部导航栏样式*/

     /*背景*/

    .bottom-nav-bk{

    position: fixed;  

    bottom: 0px;

    height: 70px;

    background: #000;

    width: 100%;

    /*透明度*/

    opacity: 0.9;

    z-index: 1004;/*最大宽度*/

    }

    /*设置内容框位置固定，透明度为1，居中，内容居中*/

    .bottom-nav{

    position:fixed;

    bottom: 0px;

    height:70px;

    background: none;

    width: 100%;

    opacity: 1;

    z-index: 1004;

    margin: 0 auto;/*文字*/

    text-align: center;/*DOMdiv居中*/

    }

  

         

知识点2：先从大局来实现，在扣小的方面细节。DOM设置水平分布 例如：.bottom-nav .item{

    display: inline-block;/*水平分布*/

    width: 32%;

    color: #FFFFFF;

    text-align: center;

    margin: 0 auto;}

知识点3：<div class="item-warp">

             <div class="icon-menu"></div>

             <div class="icon-text">目录</div>

          </div>

/*设置样式div位置居中，相对于父类item，相对位置*/

      .item-warp {

                width: 26px;

                margin: 0 auto;

                position: relative;

            }

    /*设置图标文字内容样式*/

    .icon-text{

    position:absolute;

    top: 25px;/*向下偏移25px*/

    font-size: 10px;}

知识点4：CSS的 选择处理器

  例如：实现大，小两个button之间有空间，html代码：同是button:,

<div class="child-mod">

<span >字号</span>

<button id="large-font" class="font-size-button">大</button>

<button id="small-font" class="font-size-button">小</button>

</div>

/*大小图标之间有距离/

.child-mod button:nth-child(2){

    margin-right: 10px;}

 

实现效果：

<!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;
   		   	
   		   }
   		  /*写完dom模块的div,开始写底部导航栏样式*/
   		 /*背景*/
   		.bottom-nav-bk{
   			position: fixed;
   			bottom: 0px;
   			height: 70px;
   			background: #000;
   			width: 100%;
   			/*透明度*/
   			opacity: 0.9;
   			z-index: 1004;/*最大宽度*/
   		}
   		/*设置内容框位置固定，透明度为1，居中，内容居中*/
   		.bottom-nav{
   			position:fixed;
   			bottom: 0px;
   			height:70px;
   			background: none;
   			width: 100%;
   			opacity: 1;
   			z-index: 1004;
   			margin: 0 auto;/*文字*/
   			text-align: center;/*DOMdiv居中*/
   		}
   		/*设置3个div在居中,水平垂直分布*/
   		.bottom-nav .item{
   			display: inline-block;/*水平分布*/
   			width: 32%;
   			color: #FFFFFF;
   			text-align: center;
   			margin: 0 auto;
   		}
   		/*设置样式div位置居中，相对于父类item，相对位置*/
   		  .item-warp {
                width: 26px;
                margin: 0 auto;
                position: relative;
            }
   		/*设置图标文字内容样式*/
   		.icon-text{
   			position:absolute;
   			top: 25px;/*向下偏移25px*/
   			font-size: 10px;
   		}
   		/*设置图标*/
   		.icon-menu,.icon-ft, .icon-day, .icon-night{
   			position: absolute;
   			top: 3px;
   			left: 2px;
   			width:18px;
   			height: 13px;
   			background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAAoCAYAAABerrI1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkNFN0E3M0IwMjc4NDExRTU5RkYxQjg1Rjk2QkEyNzBEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkNFN0E3M0IxMjc4NDExRTU5RkYxQjg1Rjk2QkEyNzBEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6N0M1ODVCRkYyNzg0MTFFNTlGRjFCODVGOTZCQTI3MEQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6N0M1ODVDMDAyNzg0MTFFNTlGRjFCODVGOTZCQTI3MEQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5uTX6PAAAA0UlEQVR42uyXsQrCMBRFX4p0V39Pv8FJcekHFJe6d+v3NY6CDvUFooQ0AcEllnPhlgz3QU6bBq6ZnvdaRC7qndqoB/VR/ZC5wuxGytLtvXejUJ0uDlGgVZ8Tg6lsaWod1Jh461a9TQyMBX6hWLaSBary5zBWn8kPf8DUr/Rx8hfEPth4kxkIs+tCL4rG/VOLPH5AAQUUUEABBRRQv0O54nf1tcL6dZ3Jh9mpMH/2TkmkJFISKYmURKCAAgoooIACCihKIiWRkkhJpCR+XxJfAgwA/ROhOlYvoWQAAAAASUVORK5CYII=);
   			background-size: contain;
   		    
   		}
   		.icon-ft, .icon-night ,.icon-day{
   			left: 1px;
   		}
   		  .icon-ft {
   		  	/*position: absolute;
   			top: 3px;
   			left: 2px;*/
            width: 20px;/*宽度20px,duo了2px,所以向右移动1px*/
            height: 13px;
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAuCAYAAACViW+zAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjBCRTkzQUQ3Mjc4NzExRTU5RkYxQjg1Rjk2QkEyNzBEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjBCRTkzQUQ4Mjc4NzExRTU5RkYxQjg1Rjk2QkEyNzBEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0U3QTczQkEyNzg0MTFFNTlGRjFCODVGOTZCQTI3MEQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MEJFOTNBRDYyNzg3MTFFNTlGRjFCODVGOTZCQTI3MEQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6/hjRDAAAFqklEQVR42uRaaWwVVRi9fTbYqoBoEGIVrDsBA6JRAY0VSkQUl7pQI8YQGjTRaNCgBtdoApho3aoRRJaIC25/VBTBCiqCuKX+QDFqFANRsRCtsRWr9XzxNBnu++6bO/fNe9i+k5y0c2fmzrwz3/22mbKuv9pNChgCLgLHgBvABnCr6Qkor1CHy1ISZjVYG9leC55V6sLsB/4ucynj7T1VmEwKU09VRBHUmx6MNIS5JuF4SQhzIniKY5+MjypVYa4OtKb/PfJxvn3B7eABOY4Rp3wo2FZKzndajCiG+68otaWkLaP23rKcQoWRDHekMj5DGZPjTisVYWYqY+vB5/g3qZPuFcIMYFJn4wnrr50EDujtwlwFVlpjreBL/P9lbkdRyfMKBcmn7gRfAbeAO8G/wS7yT3Ab+AHYBF4I7ptmuJbUfzN4vDXeCN4U2X4AvNE65gtwOG80rYc6ndcdFnD+DnAe+ChCdme+wpzJyjmKLgr1VWTsOAph11A14LoURBkKrgBPTWGu98CLIE5rPktJC73NliiG5vxOgUK3WN3GlEQRnAG+Zjo7+oQKMxCsU8YXOI7XnHAd5wnFQeAb4GBl37fgXeDp4CGS09Jiy+hPxMoud0RNSSduDV1Kt4DzrbEfecHdyvHyBKSLN8galxu4L1CYp5lxRyGO9WbwcbDT00/OtYVg2VKFJdWWxGIyjtxliUMUw/HFjhwoJBqOVMoLuca54COeonT7xDmMUHbtV5d0KU0Ej7TG/gEXxpy3kMdFIfPUBghzneLMJUS/HTCXiPOYMl6bVBgtc30T/C7mPNm/KgUnvA94iTX2Cy0lFO87rNJbmCpwiqdz9XXCUzivLyqZK21g4tadSObTU96q5FSHJxFmBj18FD8wOvhgJY/fowviKDhz9XXuBccy4kg/eWkKofo3a/tAX2HkBzQo44sSODs57illvEER3Ac7mdxtTEGY/UNrpXOi5hXzQ3NBE1LmnbyXasSTafHlocJoTvJVFmRJsI3n7a12xCD6tfnM0j8CJ4UWkUeA3yjinQ2+FXBzkxS/JKH8KI/o5oP+4LHgMWA177+a20O8ZymvKDMxa9yViK1Kue0xkwlXyLmy1M/jw6pO08RcFiPp/PeOmiRt5CorcvWEbgePDrzmbpYld7gsxiXMpeALRXSGl4Evei6XpWw0JcEf7CN9Bn4Ivs4H0pVUmDXghCIK0+xxvT70UeMd+yXx+5RhfDOrbXH68u5rV47SwFsYcWBfFrDJVKP0arRmlw2tKyj4GnwYfJY5TtKaSRUm4wihtigi1LspWcc6zme3AnKFbnGs1yo/ai4bV00BogyM8+xRVBi9ab3ApNer7XI0t7Qmezemm+zm9f3gbQmddhQnJBFGKtiDrTFZa8tS9inLlAJQrnux4/gJSu10T573MD6JMFqmuyKH8wrFLkfUc7Ujhlvbn1Cc4DTF6O/GVGFGgOMczaZCQFtO4xQTzzBM21acD+rjcqBMzNNqYQ+kEJB5P/eon6RssD8jGWb0z9t8cBj4oE9aLZDPNaZ5PtU0oTWxtM9LWqxtyZTPD7ievO9abbIb9JHeQUcmKsxUxVxlDS8vsDDLFV/R32R/2LhSOfdJ4/8VhfRdZoEfmz3fomoRbXBUGG0ZPWMK/yVUGxOzuOW0mGm9nYes531eQCvqXl7lrNrr2QuSNmajZYm/gjco1x7RnfkOdZT9o1lbFBqjGWW0pC56X9czw42DtCv7xvig7VyKP5vsL9gfQvY7Syymw2S/4thUJFEM65tNisO1I4+8EZjnkWj2ixFFLHQUH4b0ordY+6+En+knwvzElDoaCmeb4mK2JUQT78vGHPZeWhLOL3M/D55k/ntptyOy724l0WyMFpE1jO3NrEyLDVk6E1lIrvU4fgxFGkv/UsWSQnxHK5dhC/3QGqe/dHy1+a8AAwCKR08FSRIHxQAAAABJRU5ErkJggg==);
            background-size: contain;
            }
        .current .icon-ft {
            top: 2px;
            left: 0px;
            width: 22px;
            height: 15px;
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAAA0CAYAAAAg5t6HAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkNFN0E3M0I4Mjc4NDExRTU5RkYxQjg1Rjk2QkEyNzBEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkNFN0E3M0I5Mjc4NDExRTU5RkYxQjg1Rjk2QkEyNzBEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0U3QTczQjYyNzg0MTFFNTlGRjFCODVGOTZCQTI3MEQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0U3QTczQjcyNzg0MTFFNTlGRjFCODVGOTZCQTI3MEQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7nhaYNAAANmElEQVR42uxbC1RVZRb+QFFQuPJMQBBQUG+i+ABURK1Gzcqkxnwwo65aY5Zm76aaWdOsmnFmmlY1q4fJNLPKyjJXWZY91JyafKMCCir4IJWXIIqiIiiv2fvc/xz+/9yrl3u5usZx9nJ7/nvO/zr77H/vb+//xwueJX/iUcRxxDHER4kPE28lPof/AfLyYF9W4mnEFgfPzhB/Qlx4rQuskwc16/5LCIupK3F/4lziC9eywDq727D1WUlNX0QaXQK4PCwclvcnY2J8ECIPnULFnK+wLrdS07DuxGnUbs1/xdJ60b123h4af6Be+ICENTAUMV07wYevH03BJKnegGt9SXp74EuF0qUXl4N94WMN1Yy9Qf2DER3oa2hylKh//QpMeEWNnhqB/o68yNMjFM0a9X+BCZppRZKjCqb7I69bgdHyGk6XLly+Mx43xAUi3FE9vj+ZnuseU7S7LjVsnF5YONyxdun0sPp83HUnMNKSCLpEcrlnd3QZ11sDrpeWLD3neuJnJLUPv940zLBFz46ElWHE5Srz82dGKkIddb0JzHjhewbYL8fGFjSZ701T612TAnMX6afqwiYPGBkVgDBzhUWbsfaFMbhDvsf1ZlgRsaIQx7g9LctUQv7bPYzg40Xwz9iwpwjbfKW4uZm4jvgUcZlIDhwU966YwMbqhQeGYrD5IYVE5X/YjKLZiRhCIVIv+dmDQ5EkBKb3s90DQuIxODwbqnttJ/GzRTCD7NHifinxt8QHPL0ko4k1gx1tge/oKC2oVmj5PuyWrzJxfW4nfobTy0Z3xPEQL6Ti48Qj2iEsZ+81jx267sw8pWEZeuE3ozDQx1vt43wj6l/erqk4Xt2Bg0+mor6bD/z051yf2y1YixypvzfdEBY7kNlmITEenG5FX2sIwujDhAZ0gZ9vZ8J+Ykk2t6L53EXUn6jHmQM1OP79URzNysNhutcsumCtm0+8lLjYblw3nMRLWoFali/EfeHdESxX+OIgcu5aiX/rv1dNxU0ZCSpQPXYONVGL8W5La1v0RLasxQVhDaHLLOOre8Nr0VgkzklEcoS/Op/2EAtw2V5kP7YeeReajXlwGuot4vKOLEnDs9HkoszC4vd/dbu6DP+2A/mtpk74pbi9Ox6ThNVHFtbwcFgOzEMmQZaJ7giLyZ+0kGzrTQVzMY2iEn01cA5vakdtWLpemDfEHkoUnkDJhlLN+2gfjv/7sQQ1RSdRYq5rap/uwhyMl5gQi5DvM/ELeskIT3jYhCBErZ+Ju7v7GInV3sQ3umvDYok1+ECezy81EgnmCh/uVbSL8/gTuLBsD3b/aZw2eBsuofbcD3nUeu6XNCeWluURJ9o1SkAFxPSA74q7MNXSVUtMKkT2qXbNT9j7bTFKth9DzdFaNBAu1BSdhdE/BN3v6IvIOQ68eB8SftYkpM5erc2fifN5+9zRsMkSsh/UyUtNb5+5gLrXdipGUh8QfJ+en1d8O7Xnfhz13545fDAZtwT52rK8OjW1oHlxLn6IehPv8At/tA/l/EF0YTHVNaKZM8B/JNjT/218/GmRPawhgJ0sh3HEIa4KrIvQMM3AZvSzx17rDmMPT0b8LCFt4bR0iT5Jel5g526pH+5P12DSIJ/LaFeysCu4vS/C0qPV2JW934J1+GzhOuRKhvuyxE5nxhfYyKl0UxjX5eHhygrq56rADKN8fxJiQv3Qw2TsW1/KRr506zvTFfy8FVDsP/czN0nJ0Ka1Zw5PpGCo2b0vzceWf+xSbCVv8WURPy+88FPMVH6G+BXiI7rQyEPuskPm0cq8Yl0VmI6G8aske+3KP44jO45pGsVUSxPTttPEtZbL/LzguL2Nmqv2N/oS2uUt8BHjOK+0qLYvLjS4/qkftB0pA93Q2G8QHyI+J0MWKjcTc6SxUr+3+pAKHYQtk8O9SFcExrGZ5q4HhcF/aE/0NVdYWqAY+82mx1v0wnt77JE/98f9ip/BIhY0k7FUeX9g5X7sLD6NCtIOTWM3l+Hg6QYj2C8jgWxsx3sdE0gIbNPM0CfYT7GPga4I7DYDXZKRJsCqtDnVgLNLcrUA1s7Ym38vzsFhrq/gGurvadX432aeAAmAQaRmZ6rPo5EM+rb4LCzvk4W3ntuAr97Jxx6p+kYnnjaAmKHCDBGI21Bqk7pf6tfZZi/1n+2FFX76UiBD6E2ueJC5wtfFKJCM7FF6uXrTy56nCbI9ieF631D9Xw5UbRX3S/1ni35iqH43bmcaaqXAYMbyYLiwaAv2K3b8WeRQe18BgUKFhwsSqyRM1hbFqznJ57VXYIahnT8McWY3Tkui5aVtivfjl335ch3+lepn3oiRsqZyvw8NRxxFCcVScvJ7k+BZ6K+KJcu7UFYdk+nTIc6j57/VTUh76O5+6Pl8OtLNK8ddgRlG+N5B9sg+rwrFBdWuHTLh+tyOQhoF+BKITJIENtosMElwhziDRPwVCYfB8BThxfiFnW6u9A9Gt9v6ImJMFCLHRCMhrJumfR5JIPIX1OBDSgQsg29oc606/XO3AiXaTe/mI98sMO6fxxHetgdnI3Rv68AO8fK5lfgmR88j/dF1ZC8EkTMJIm9n6eWPHhE2DiRttlypjOsEw9iPwGAvB5mNJbdi6pJbPZQppX88zrRV2CSNX+hAWPzhZgr7ZGQrFpDJIFvYhz5EbIgJJ16NFLVFBJ5a7DUxDolXI1/O49B4W0XE0JuEYxERg5xZvVeknW2p8LEYSIH8SFpage6MyRHCJ0XYMdPavg3mSwnMaPxoMvo6CnCvBPE4PN6ftxppYnY6a02ZCn992X15DyaRRsW7MgbFlY3lZ1FTfApVOytR+V4Bfio8ibqOCsxw+wQBknAVaRYZf0cCI+0aLGv9+kxMsYaoGRDJe7eWnEHVvhM4tr8GJw/UoJYEdLaoBnWlZ9Dg6SWZqH9FiqeCrKH2k7rva6wgdF/WUeHcNxjR79yO6fK9ASQEHlfk1fxJUIm0LPfIqfEPp2CMI2ERqD39cSFyX9mOQsZoV+KDOsIePzOC3FQkmS19ZR1q3t/TcWFpoVIBSrk/c86cx5VujSeh9dM9dmoEepBxH2LO9JIdyo5bgqWPfIc8J8JqhG2HKNuI/YLakLyrGsaAL1rYk84TYtVsI9PnB5Df0uqZr8X9cH/zh6rwgMelmHGTiA85lW1AkMdTkUheUcnFrTqAHdPbvKtOVbDtN/L1JGznbGv1SIQ+AoNf3mniYwxh7gqs7axXKhLk3R5hMJv+shV7pVuv0QRKXYYQtq21R7nM/c1NQrq8+8TjPpGChN9vNGBFnP4sOVxdihRONT6wRolfOcWziuZV4mQa46UP1NvdJWl4Cgpf7Iz95jLsl4xmpTvCEmid21VymfvbUqbEg47GNw6uRAW0ZT+ZjtSiigNy8bOC+n7dmbCEdsWK4B+3xNjvrbZHYEP0qJzwUKg518309zwF2W/o4Io0sgpZefYRA48/qY8BTn11gOqrZhE4yyCf4bjYDu1mbztX//27NAxwBcPJArtFLzyWYq9dZWdRTR6oQsoKdGiLn9pni4AZ3C9ho2pznUeS1Xk0taCVlqAilCgLgr3bPBOnudOIg4i99OQjcQhxCjHvkM/RKyfdgIAnU3GzO7AiTE+bkLR9bnZw1uvTIrsdIU/QNh3zkZfbTR9qvPyQ50Hz2SAtORC+qk6QtD+YYkNqF0+B+yFx6+eSNjXo2mkmMvTBH2cgg5xbt0sKhzS6qW0DhT9Aq7cZqJLEB9ipPRnWF7cpcd02DwnMEDz3z+PID3kev1YPFGNTqZKs1OiFdEzkU0EO+rcTFsWZPhT/Dl87A7PkjWgOkcx1CRPKEU6AvCSNxOAMBwd7fyxBYVWdsRQqRHq3wyRy69oy5/43ltoH26YzZVo+jcMb+R7vXC/PQObm2bidMFw874bry5QTn6N6IfC50Rjwr0xMLFmAebzLLR8AbGjChdd34gfz2OlRyhH5WH1JBulZSB4otoeSlNPozRxlOf7oYfDM/WVy4Y0c5I+PVTdZeD5S2gcU6px/exc2PTRMtT2c7UjrBSuzJIiLXTujy+UOkNRewLl7v8Yq8rbnH09RnxFAjiWHdETKnuSzhhle5txFNJm3wg6fRuXqQzgueaEcT0qLU8oCfePLg6ji8UwovvXMBfU0I+89kk3NdoaffZ0Ia0s5CpOX4n0CvlW7qnC2yhR1ENy4MbxtQ5eXfAoLjDclTuhf75ti5MlA9flNikZtxZUhY2eJx5OPe/J8eF7i5wljqRKyn78Gn5Y58K5OshVNW8tRlLESy0Z/gG/EUQWNFueq78cAmuJWOQqJ85Iw2Cw5KKbgNvCz/SjZVmHbV9Rtsz5p+Y+zOpw8tP05jdEjx4vTrYjZewKn3s1XwPEy4mEwHRDhY6N3JiCWYEIkeVVLYFf4+3RCZ7ZNtGoayMvWHjyFagLeFRQHH5Xssau0QtbYB4HL5pY+kzXhClCaDAkcEMOGLFEeK3L5HSU2BatFwnS8k7ocPbwuB7E7YTsYa8ZgbGyXe9p2OaBS4THjHMCBzwXrxDtI+SJREQXXDwbyOOthO2VYKj5GtYAO5k0RhjHr9PG9LoH+40TOnCsfx9WnnmIO1WIOzg6XJIj6seKFORXEsKEBbSemK0Rf7PXc/nPq/wgwAHlvUwHlIWIoAAAAAElFTkSuQmCC);
            background-size: contain;
         } 
         .icon-day {
         	/*position: absolute;
        	top: 3px;
            left: 4px;*/
                width: 19px;
                height: 18px;
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAA5CAYAAACMGIOFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkNFN0E3M0I0Mjc4NDExRTU5RkYxQjg1Rjk2QkEyNzBEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkNFN0E3M0I1Mjc4NDExRTU5RkYxQjg1Rjk2QkEyNzBEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0U3QTczQjIyNzg0MTFFNTlGRjFCODVGOTZCQTI3MEQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0U3QTczQjMyNzg0MTFFNTlGRjFCODVGOTZCQTI3MEQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6o6V5PAAADu0lEQVR42uyaTUgVURTHm/cigiS1LEitoHoqbgtcZAStngtDoYxa9rFsYYuWfUBhuSjCneiylkH2oavoEZlC4aYsM9toakWLnpsWyfQfOMJrOvdjZs6bedQc+OF7d9499/y9M/fj3HFc110Xo3WAYfp8BozG0agTs8hFsIM+L4H6f1GkvzEnjkYz6/4DS0WmIlORSlsq+bxcKSI3gkHwBlwSGA3PkrjPNE+GnhXAZYprkOLUjOmYQjT0un/aMHAMdcqNQ3GUWq+ujqknt/i+nwZDcc1vih4cojh0cQbqyQaw4P5tSfQo14OezYNGXV0b5zly5Le+mEX2KQTmTHVtl3U58BQ0lpQtgJ2Gei2gE7SDVrANVIMf4Bt4B56Dh+C9wdc80/4RMGteTNr/J/09+lhzW3WBCTeYTVA91WPwKGgPBrldS9kFBkA/qGOuN4FnbjTz6jczvuuoXa/93UHilnxmjoMVV8ZWyJ9IbFICz4FVV9ZWyW9FiDwGfmmCnQIXQBuoBxvobxuVT2nqen57khbpPYNFRYBzoNtiPnXod3MKP0VqJxGRjmaQGQXVAf1VUz3VYOQkIbJLEdADkA3pM0v1OetKQuQ4E8gHUBXxEfDqzzC+x+MW2aL4b+eFRuu8wn9LGH9hN82dTNlrMCa02xgjf347GmdmoJ0puyu8rbrHlB2MU2QrUzYuLLJg2a6VyA7KbLsMi3Tdb9sVuwRJ+2TZrjF+b+4pTd2rkk/1hky4Z+vBapkz7lzW3Ri/ze3KpTqKTNlmYYG1TNlKmJRJpiSDxpkqq/aVKdsrLHIPU/ZFkwFUxu/dYk8M3c3ZNNjnKzsEXgmKPKxo12/G+MOOri+YslPCPXnSst2yTSEjTNkBkBcSmCd/Nu1aDF/hl15cDmdGYO26SXrtGuUs5AZT1kQrn2xIn1la6TQx1/rDT0TR9pMFxUL6fogeraJ6nBWS2k+uZQZUyauPtOO38dNNv1cltZqTzvH0WOZ49oMaqlND321yPCfSbF2ad5UXufaMFiIKLER9BqOK9Ea4m2CZEk61mrOQyYDiJjUpzFpqb5nad8olkjsfvG6RC7oIRsBsSY62SN9H6Lopd3MtyvmorcCM4gD0dkxnk7eiHARHEWg84RWkUXPinZEQeSXsCa8wOYXQqxIi31aAQN3R/rTEAv1lqCNs3taSTqoEmclmqf2FIFlCm3cGvBeBzoOt4I7vraqgJvW+awPF9B0MgJ9RRZYz+5a+75qKTEWmIstuFfm+q7RJve8ayH4LMACaxEJEaXs23AAAAABJRU5ErkJggg==);
                background-size: contain;
          }
        .icon-night {
        	/*position: absolute;
        	top: 3px;
            left: 4px;*/
            width: 16px;
            height: 16px;
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkU2OUYzRUEwMjc4NzExRTU5RkYxQjg1Rjk2QkEyNzBEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjhBMzA2RjA2Mjc4QTExRTU5RkYxQjg1Rjk2QkEyNzBEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTY5RjNFOUUyNzg3MTFFNTlGRjFCODVGOTZCQTI3MEQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTY5RjNFOUYyNzg3MTFFNTlGRjFCODVGOTZCQTI3MEQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4v5YACAAAC/UlEQVR42tSaXYhNURTH97kzRnJ9ZTQzPh7IMEr5yshHEwkRkSeSjweEiMjDePTkhcKLPCApUV54GxTKcDM0JfL9QE0UGdcdEmb7L3edOq5zzz1nn332Pvdfv5e5Z9Zd666711577etIKYUGjQILwRwwDOwDfcKAamP873CwBawDrcABP8ACU87/FWUgIk3gKMjL/7VfwV4sojxcCw6AL9JfD0DGdABhv0KTwAUwO+CZvaBfGFaYAJaDyyAb8Mwt0CksKFPh9W3gWgXnSSeFJTkBZXQrOM3VJUi9oJErUGoysBKcCuE86YYt58sF0MILtiakjTvCojI+i/o876Zh9ThNARysUCr99NpmAN5FTAvxBRgS0QZlK5+GDLQrOC9sOu/NADVm70LU+9RmYJOi8yLigk8sgPUxbEy0HUATH0RUNdV2AG0hd9xyarMdwNyYNhaDOpsBTI5pYwRYYTMAHYtwh80ARmqws1ShBdEWwGAdGyI4HrMYKAegawFSMdhlo5XIK/ZAfvoO5oFukxn4oNHeID5DjzUZwCvNNsn5DjDOVADPErA7BdwF0xP2v4YCyCVknDJwjxe2k8AHT4O0VTSeawD9Mll1glZN48T5IMc+N7p/7JJm1AFWg4ERna4Da8F1j62cdzZKY5RZBtbcEuYzuAlugyfgOSjwyS7LJ8QJYJoojuuX+RycLnqPlPXgLZfBalCB11iveyL7CM6K6tEZURxp/jNWGc2pzFbBp98M3peOVXrA4Sr49I+4zpdmgDSA94UZKXX+ITeNP8sFIDg9XWBoypyni0O6THzqN1bx6iXYCH6nyHnyZXOp8+UCIF0Fe1LiPH1FdoMr/q8G74DbwS9pT/TeO+Nes64JuFpNUl+5fdByT9wMHhl0vhu06L7opobqEPiWoON9oJ0v1bXf1LuMAcdAQbPjJ6g9juqPE+PXKvVcbjeAmQqHFsmb5iVwzu1tVKYSOkpdA1jEU246To4XxZ/gZLlUU5v8CbzhI+x9bqV74r7xHwEGAPDRVwnecW5KAAAAAElFTkSuQmCC);
            background-size: contain;
        }
   	    .nav-pannel-bk{
   			position: fixed;
   			bottom: 70px;
   			height: 135px;
   			width: 100%;
   			background: #000;
   			opacity: 0.9;
   			z-index: 10000;
   			
   		}
   		.nav-pannel{
   			position: fixed;
   			bottom: 70px;
   			height: 135px;
   			width: 100%;
   			background: none;
   			color: #fff;
   			z-index: 10001;
   			
   		}
   		.child-mod{
   			padding: 5px 10px;
   			margin: 15px;
   		}
   		/*偏移文字span*/
   		.child-mod span{
   			display: inline-block;
   			padding-right: 20px;
   			padding-left: 20px;
   		}
   		.font-size-button{
   			background: none;
   			border:1px #8c8c8c solid;
   			color:#fff ;
   			border-radius: 16px;
   			padding: 5px 40px;
   		}
   		/*大小图标之间有距离，或者有线*/
   		.child-mod button:nth-child(2){
   			margin-right: 10px;
   		}
   		/*css3做圆圈*/
   		.bk-container{
   			position: relative;
   			width: 30px;
   			height: 30px;
   			border-radius: 15px;
   			background: #fff;
   			display: inline-block;/*水平*/
   			vertical-align:-14px;/**/
   			margin-left:10px;
   		}
   		.bk-container-current{
   			/*在父类中设置relative相对定位,*/
   			/*之后在子类中利用绝对定位*/
   			position: absolute;
   			width: 32px;
   			height: 32px;
   			border-radius: 16px;
   			border:1px #ff7800 solid;
   			display: inline-block;
   			top:-2px;
   			left:-2px;
   			
   		}
   		
		</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 class="nav-pannel-bk"></div>
            <div class="nav-pannel" id="font-container">
            	<div class="child-mod">
            		<span >字号</span>
            		<button id="large-font" class="font-size-button">大</button>
            		<button id="small-font" class="font-size-button">小</button>
            	</div>
            	<div class="child-mod">
            		<span>背景</span>
            		<div class="bk-container">
            			<div class="bk-container-current"></div>
            		</div>
            		<div class="bk-container">
            			<div class="bk-container-current"></div>
            		</div>
            		<div class="bk-container">
            			<div class="bk-container-current"></div>
            		</div>
            	</div>
            </div>
            <!--编写下部导航栏,首先设置背景div,在设置整个下边栏内容的div,在分为三个dom模块div2，
            	class相同(在设置每一个具体div（分为图标和文字div）)-->
            <!--背景div-->
            <div class="bottom-nav-bk bottom_nav"></div>
            <!--下边栏内容div-->
            <div class="bottom-nav bottom_nav">
            	<!--三个目录，文字，夜间div-->
            	<div class="item menu-button" id="meau_button">
            	     <!--具体的div-->
            	     <div class="item-warp">
            	     	<div class="icon-menu"></div>
            	     	<div class="icon-text">目录</div>
            	     </div>
            	</div>
            	<div class="item " id="font-button">
            		<div class="item-warp">
            			<div class="icon-ft"></div>
            			<div class="icon-text">字体</div>
            		</div>
            	</div>
            	<div class="item " id="night-button">
            		<div class="item-warp"style="display:none;" id="day_icon">
            			<div class="icon-night"></div>
            			<div class="icon-text">白天</div>
            		</div>
            		<div class="item-warp" id="night_icon">
            			<div class="icon-night"></div>
            			<div class="icon-text">夜间</div>
            		</div>
            	</div>
            </div>
            
            


		</div>
		
		<script src="lib/zepto.min.js"></script>
		<script>
			window.jQuery = $;
		</script>
		<script  src="js/jquery.base64.js" ></script>
	    <script src="js/jquery.jsonp.js"></script>
	    <script>
	    	(function{}{
	    		var Util = (function(){
	    			var prefix ='html5_reader_';
	    			var StorageGetter = function (key){
	    				return localStorage.getItem(prefix + key);
	    			}
	    			var StorageSetter = function (key,val){
	    				return localStorage.setItem(prefix + key,val);
	    			}
	    			return {
	    				StorageGetter :StorageGetter,
	    				StorageSetter :StorageSetter
	    			}
	    		})();
	    		function main(){
	    			//todo 整个项目入口函数
	    		}
	    		
	    		function ReaderModel(){
	    			//todo 数据交互方法
	    			
	    		}
	    		function ReaderBaseFrame(){
	    			//todo 基本UI结构
	    		}
	    		
	    		function EventHanlder(){
	    			//todo 交互的事件管理
	    			
	    		}
	    		main();
	    		
	    	})();
	    	
	    </script>
	   
	</body>
</html>

 

lvzekun-IT
关注
专栏目录
web课程设计
07-21
web课程设计的代码，供大家参考。方便大家学习并且制作web网页。
InternshipWebAPP_v2
03-06
InternshipWebAPP_v2
webapp开发
05-02
主要用于webapp开发代码编辑，主要用于手机网页版转换成webapp
视频教程-Web APP设计与实现-其他
weixin_29023561的博客
05-28 117
Web APP设计与实现 Adobe认证讲师 Adobe教育讲师委员会委员（...
web课程设计---设计一个网站
09-19
这是花了一个星期才做的课程设计 关于中国文化馆的一个网站 用了CSS技术和javascript
PDP.webApp.1:PDPmayo Web应用程序用户课程
05-18
7. **MVC模式**：讨论Model-View-Controller（MVC）设计模式在Servlet中的应用，如何分离业务逻辑、视图呈现和控制流程，提高代码的可维护性和可扩展性。 8. **JSP（JavaServer Pages）**：JSP是与Servlet密切相关...
HTML5时代：Webapp设计探索与技巧
7. **交互一致性**：遵循用户熟悉的交互模式，保持一致的图标和控件使用，降低学习成本。 8. **内容优先**：确保内容清晰、突出，避免过多的视觉干扰，使用户能快速获取关键信息。 9. **动态更新**：利用服务器端...
webapp:制作webapp
07-13
【标题】：WebAPP开发详解 【描述】：WebAPP是指基于Web技术构建的移动应用程序，用户无需通过应用商店下载安装即可在手机浏览器上使用。...通过不断学习和实践，开发者可以创建出功能丰富、用户体验优秀的WebAPP。
毕业设计：高校社团管理系统，ssm.zip
最新发布
01-02
【高校社团管理系统】是一个典型的软件开发项目，常用于毕业设计或...总的来说，"高校社团管理系统"是一个综合性的项目，涵盖了后端开发、前端开发、数据库设计和管理等多个方面，对学习和提升全面的IT技能大有裨益。
javaweb课程设计：基于SSM的实战项目-图书管理系统.zip
09-10
8. 创建视图：设计JSP页面，展示数据和交互界面。 9. 测试：通过单元测试和集成测试确保每个功能的正确性。 本项目对于学习者来说，不仅提供了实际操作的机会，还涵盖了Web开发的多个重要方面，如前后端交互、...
webapp（html5 ）,移动前端webapp（html5页面）
weixin_39634067的博客
06-29 917
CSS3+HTML5几乎可以毫无顾忌的使用，然后浏览器端考虑webkit内核的就差不多了。1234第一个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览，在ios上，用户将网页添加到主屏后，再从主屏幕打开这个网页，可以隐藏浏览器的地址栏和下面的toolbar；第二个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不...
webapp2源码笔记
一地鸡毛
08-18 681
def default_dispatcher(self, request, response):         """Dispatches a handler.         :param request:             A :class:`Request` instance.         :param response:             A :clas
慕课网实战项目《WebAPP书城整站开发》笔记一：底部边栏样式实现
后乐的博客
05-21 1万+
推荐IMOOC实践课程： 《WebAPP 书城整站开发》 阅读器底部边栏样式实现
linux内核中NCFGR,The Linux-IrDA Project
热门推荐
weixin_39757265的博客
05-06 5万+
You can subscribe to this list here.2001JanFebMarAprMayJunJulAugSepOctNovDec(1)2008FebMar(7)Apr(8)May(6)Jun(7)Jul(5)AugSep(1)2009Jan(5)FebApr(2)May(2)Jun(3)Jul(2)Aug(2)Oct(3)Nov(1)Dec(2)2010Jan(5)Feb(...
WebSocket协议状态码1004
博客
08-18 1368
WebSocket协议是一种在Web浏览器和服务器之间进行全双工通信的协议。它通过在单个TCP连接上提供双向通信，实现了实时数据的传输。与HTTP协议相比，WebSocket协议具有更低的延迟和更高的效率。WebSocket协议使用状态码来表示不同的连接状态和错误情况。状态码由3位数字组成，分为几个不同的类别，每个类别都有特定的含义。1000：表示正常关闭连接1001：表示终端离开1002：表示协议错误1003：表示数据错误1004：表示保留状态码（Reserved）
Eclipse+Maven创建webapp项目<一>
weixin_33851604的博客
11-23 734
  Eclipse+Maven创建webapp项目&lt;一&gt; 1、开启eclipse，右键new——》other，如下图找到maven project 2、选择maven project，显示创建maven项目的窗口，勾选如图所示，Create a simple project 3、输入maven项目的基本信息，如下图所示： 4、完成maven项目的创建，生成相应的m...
android镜像分析
鹅鹅鹅的博客
01-15 1万+
关键字：反汇编、 内核 涉及工具：mkbootimg、 unpackbootimg、 gzip、 readelf、objdump、simg2img、mount、extract-dtb.py。 分析android源码编译出来的镜像，主要是boot.img镜像分析。
signature=fe1aabef3439a54d34c395244cc46932,Added ISOWeek to System.Globalization
weixin_39957271的博客
05-29 3494
Commit list for mono/corert:* mono/corert@1b7d4a1e4 [Number] make double 0.0 cmp more portable (#30)* mono/corert@c4ae51646 Update ISOWeek.cs* mono/corert@7e8bf2382 fix ISOWeek for mcs* mono/corert@0e...
Java Web——课程设计《仿微信朋友圈WebAPP》
Liwo4418的博客
04-07 3225
开发背景：为了更好的与亲友们联系、分享日常，为此开发小型朋友圈WebApp，以增加亲朋好友之间的亲密度。开发工具：Windows 10, IntelliJ IDEA, MySQL 8, Maven, Tomcat相关技术：JDBC原理、kaptcha、Apache-fileupload、C3p0、mui等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值