<!--?導航條開始?-->
	<div?class="container">
		<div?class="st-container">
			<input?name="radio-set"?type="radio"?id="st-control-1"?checked="checked"/>
			<a?href="#st-panel-1">第一個鏈接</a>
			<input?name="radio-set"?type="radio"?id="st-control-2"/>
			<a?href="#st-panel-2">第二個鏈接</a>
			<input?name="radio-set"?type="radio"?id="st-control-3"/>
			<a?href="#st-panel-3">第三個鏈接</a>
			<input?name="radio-set"?type="radio"?id="st-control-4"/>
			<a?href="#st-panel-4">第四個鏈接</a>
			<input?name="radio-set"?type="radio"?id="st-control-5"/>
			<a?href="#st-panel-5">第五個鏈接</a>
		</div>		
	</div>
<!--?導航條結(jié)束?-->

<!--?切換主體內(nèi)容開始?-->
????<div?class="st-scroll">
????	<section?class="st-panel"?id="st-panel-1">
	????	<div?class="st-desc"?data-icon="H"></div>
????		<h2>1主體文本標題</h2>
????		<p>這里填寫主要的文本里填寫主要的文本內(nèi)里填寫主要的文本內(nèi)里填寫主要的文本內(nèi)里填寫主要的文本內(nèi)里填寫主要的文本內(nèi)里填寫主要的文本內(nèi)里填寫主要的文本內(nèi)里填寫主要的文本內(nèi)里填寫主要的文本內(nèi)里填寫主要的文本內(nèi)里填寫主要的文本內(nèi)里填寫主要的文本內(nèi)里填寫主要的文本內(nèi)里填寫主要的文本內(nèi)里填寫主要的文本內(nèi)里填寫主要的文本內(nèi)里填寫主要的文本內(nèi)里填寫主要的文本內(nèi)里填寫主要的文本內(nèi)里填寫主要的文本內(nèi)里填寫主要的文本內(nèi)里填寫主要的文本內(nèi)里填寫主要的文本內(nèi)里填寫主要的文本內(nèi)里填寫主要的文本內(nèi)里填寫主要的文本內(nèi)內(nèi)容</p>
????	</section>

????	<section?class="st-panel?st-color"?id="st-panel-2">
	????	<div?class="st-desc"?data-icon="H"></div>
????		<h2>2主體文本標題</h2>
????		<p>這里填寫主要的文本內(nèi)容</p>
????	</section>

====================以下是CSS=====================

html{
	width:?100%;
	height:?100%;
	margin:?0;
	padding:0;

}
body{
	width:?100%;
	height:?100%;
	margin:?0;
	padding:0;
	background-color:?#034;
	font-weight:?400;
	font-size:?15px;
	color:#333;
	/*overflow:?hidden;*/
	-webkit-font-smoothing:antialiastd;
	???-moz-font-smoothing:antialiastd;
	????-ms-font-smoothing:antialiastd;
	?????-o-font-smoothing:antialiastd;
	????????font-smoothing:antialiastd;
}
a{
	text-decoration:?none;
	color:#fff;
}
.clr{
	width:?0;
	height:?0;
	overflow:?hidden;
	clear:both;
	padding:?0;
	margin:?0;
}
.st-container{
	width:?100%;
	height:?100%;
	position:?absolute;
	left:?0;
	top:?0;
}

.st-container?>?input?,?
.st-container?>?a{
	width:?20%;
	height:?34px;
	line-height:?34px;
	position:fixed;
	bottom:?0;
	cursor:pointer;
}
.st-container?>?input{
	opacity:0;
	z-index:?1000;
}
.st-container?>?a{
	z-index:?10;
	background-color:?#e23a6e;
	text-align:?center;
	text-shadow:?1px?1px?1px?rgba(2,2,233,.5);
	
}
#st-control-1,#st-control-1?+?a{
	left:0%;
}

#st-control-2,#st-control-2?+?a{
	left:20%;
}
#st-control-3,#st-control-3?+?a{
	left:40%;
}
#st-control-4,#st-control-4?+?a{
	left:60%;
}
#st-control-5,#st-control-5?+?a{
	left:80%;
}

.st-container?input:checked?+?a,.st-container?input:checked:hover?+?a{
	background-color:?#821134;

}
.st-container?input:checked?+?a:after{
	content:?"";
	width:?0;
	height:?0;
	overflow:?hidden;
	border:?20px?solid?transparent;
	border-bottom-color:#821134;
	position:?absolute;
	bottom:100%;
	left:50%;
	margin-left:?-20px;
}
.st-container?input:hover?+?a?{
	background-color:?#ad244f;
}

/*內(nèi)容區(qū)*/

.st-scroll,?.st-panel{
	width:?100%;
	height:?100%;
	background-color:?#fff;
}

.st-scroll?{
	left:?0;
	top:0;
	-webkit-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
	-o-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	-webkit-backface-visibility:?hidden;
}

.st-panel{
	background-color:?#fff;
	overflow:?hidden;
}

#st-control-1:checked?~?.st-scroll{
	-webkit-transform:translateY(0%);
	-moz-transform:translateY(0%);
	-ms-transform:translateY(0%);
	-o-transform:translateY(0%);
	transform:translateY(0%);
}

#st-control-2:checked?~?.st-scroll{
	-webkit-transform:translateY(-200%);
	-moz-transform:translateY(-200%);
	-ms-transform:translateY(-200%);
	-o-transform:translateY(-200%);
	transform:translateY(-200%);
}