master

分支 (1)

管理

管理

master

Example
/
read.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Read Book</title>
	 <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" type="text/css" href="semantic/css/semantic.min.css">
	<link rel="stylesheet" type="text/css" href="semantic/css/read.css">
<style type="text/css">
@media (max-width: 1280px){
	.book-content-header h1{
		display: none;
	}
	.book .book-content .book-content-body{
		position: static;
	}
	.page{
		position: static;
		top: auto;
		max-width: 50%;
		width: 50%;
		float: left;
	}

}
</style>
</head>
<body>
<div class="book">
	<!--侧边栏-->
	<div class="book-catalog">
		<!-- 搜索 -->
		<form class="book-search" method="post" action="">
			<input type="text" name="search" placeholder="Type to Search">
		</form>
		<!-- 目录栏 -->
		<div class="catalog-wrap">
			<nav role="navigation">
				<ul class="catalog">
					<li>
						<a href="#">Docker ---- 从入门到实践</a>
					</li>
					<li class="divider"></li>
					<li class="section"><a href="#">前言</a></li>
					<li class="section">
						<span href="#">第一章</span>
						<ul class="artciles">
							<li class="section active">
								<a href="#">什么是Docker</a>
							</li>
							<li class="section">
								<a href="#">为什么要用Docker</a>
							</li>
						</ul>
					</li>
					<li class="section">
						<span href="#">第二章</span>
						<ul class="artciles">
							<li class="section">
								<a href="#">什么是Docker 什么是Docker 什么是Docker 什么是Docker</a>
							</li>
							<li class="section">
								<a href="#">第二章</a>
							</li>
						</ul>
					</li>
					<li class="section">
						<span href="#">第三章</span>
						<ul class="artciles">
							<li class="section">
								<a href="#">第三章</a>
							</li>
							<li class="section">
								<a href="#">第三章</a>
							</li>
							<li class="section">
								<a href="#">第三章</a>
							</li>
							<li class="section">
								<a href="#">第三章</a>
							</li>
							<li class="section">
								<a href="#">第三章</a>
							</li>
							<li class="section">
								<a href="#">第三章</a>
							</li>
							<li class="section">
								<a href="#">第三章</a>
							</li>
						</ul>
					</li>
					<li class="section">
						<span href="#">第四章</span>
						<ul class="artciles">
							<li class="section">
								<a href="#">第四章</a>
							</li>
							<li class="section">
								<a href="#">第四章</a>
							</li>
							<li class="section">
								<a href="#">第四章</a>
							</li>
							<li class="section">
								<a href="#">第四章</a>
							</li>
							<li class="section">
								<a href="#">第四章</a>
							</li>
							<li class="section">
								<a href="#">第四章</a>
							</li>
							<li class="section">
								<a href="#">第四章</a>
							</li>
						</ul>
					</li>
					<li class="section">
						<span href="#">第四章</span>
						<ul class="artciles">
							<li class="section">
								<a href="#">第四章</a>
							</li>
							<li class="section">
								<a href="#">第四章</a>
							</li>
							<li class="section">
								<a href="#">第四章</a>
							</li>
							<li class="section">
								<a href="#">第四章</a>
							</li>
							<li class="section">
								<a href="#">第四章</a>
							</li>
							<li class="section">
								<a href="#">第四章</a>
							</li>
							<li class="section">
								<a href="#">第五章</a>
							</li>
							<li class="section">
								<a href="#">第五章</a>
							</li>
						</ul>
					</li>
					<li class="divider">
					</li>
					<li><a href="#">Publish By Accurate</a></li>
				</ul>
			</nav>
		</div>
	</div>
	<!-- 正文部分-->
	<div class="book-content">
		<div class="book-content-body">
			<!-- 头部 -->
			<div class="book-content-header">
				<a class="btn pull-left broadside-hidden"><i class="align justify icon"></i></a>
				<a class="btn pull-left ui top left pointing dropdown">
					<i class="font icon"></i>
					<div class="menu">
						<div class="item"></div>
						<div class="menu-item">
							<span class="font-min">A</span>
							<span class="font-add">A</span>
						</div>
						<div class="divider"></div>
						<div class="menu-item">
							<span class="font-serif">Serif</span>
							<span class="font-Scans">Scans</span>
						</div>
						<div class="divider"></div>
						<div class="menu-item">
							<span class="theme-White">White</span>
							<span class="theme-Sepia">Sepia</span>
							<span class="theme-Night">Night</span>
						</div>
					</div>
				</a>
				<a title="退出" class="btn pull-right"><i class="external icon"></i></a>
				<a class="btn pull-right"><i class="ellipsis vertical icon"></i></a>
				<a class="btn pull-right"><i class="facebook f icon"></i></a>
				<a class="btn pull-right"><i class="twitter icon"></i></a>
				<h1><a href="#">前言</a></h1>
			</div>
			<!-- 文章部分 -->
			<div class="book-content-wrap">
				<div class="book-content-inner">
					<div class="book-content-result font-size-1">
					</div>
				</div>
			</div>
		</div>
		<!-- 向左翻页 -->
		<a href="" class="page page-prev"><i class="angle double left icon"></i></a>
		<!-- 向右翻页 -->
		<a href="" class="page page-next"><i class="angle double right icon"></i></a>
	</div>
</div>
</body>
<script type="text/javascript" src="semantic/js/jquery.min.js"></script>
<script type="text/javascript" src="semantic/js/semantic.min.js"></script>
<script type="text/javascript" src="semantic/js/read.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var content='<p><strong>Docker —— 从入门到实践</strong></p>'+
					'<p>0.7.1</p>'+
					'<p>Docker 是个很有意思的开源项目，它彻底释放了虚拟化的威力，极大提高了应用的运行效率，降低了云计算资源供应的成本，同时让应用的部署、测试和分发都变得前所未有的高效和轻松</p>'+
					'<p>无论是应用开发者，运维人员，还是云计算从业人员，都有必要认识和掌握 Docker，以在有限的时间内做更多有意义的事。</p>'+
					'<p>本书既适用于具备基础 Linux 知识的 Docker 初学者，也希望可供理解原理和实现的高级用户参考。同时，书中给出的实践案例，可供在进行实际部署时借鉴。前六章为基础内容，供用户理解 Docker 的基本概念和操作；7 ~ 9 章介绍一些高级操作；第 10 章给出典型的应用场景和实践案例；11 ~ 13 章介绍关于 Docker 实现的相关细节技术。后续章节则分别介绍一些相关的热门开源项目。</p>'+
					'<p>在线阅读：GitBook 或 Github。</p>'+
					'<p>欢迎关注 DockerPool 社区微博 @dockerpool，或加入 Docker 技术交流 QQ 群或微信组，分享 Docker 资源，交流 Docker 技术。</p>'+
					'<p>《Docker 技术入门与实战》一书已经正式出版，包含大量第一手实战案例和更为深入的技术剖析，欢迎大家阅读使用并帮忙反馈建议。</p>';
		$('.book-content-result').append(content);
		$('.active').parent(".artciles").css("display","block");
		$('.ui.dropdown').dropdown();
		/**
		 * 禁止右键弹出复制按钮
		 */
		$('body').bind("contextmenu",function(){
			return false;
		});

		/**
		 * 禁止文本选择功能
		 */
		$('body').bind("selectstart",function(){
			return false;
		});
	});
</script>
</html>