1回答

• 

  Ethan_8

  2017-01-10 21:04:53

  <!-- 导航条开始 -->
  	<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>
  <!-- 导航条结束 -->
  
  <!-- 切换主体内容开始 -->
      <div class="st-scroll">
      	<section class="st-panel" id="st-panel-1">
  	    	<div class="st-desc" data-icon="H"></div>
      		<h2>1主体文本标题</h2>
      		<p>这里填写主要的文本里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内内容</p>
      	</section>
  
      	<section class="st-panel st-color" id="st-panel-2">
  	    	<div class="st-desc" data-icon="H"></div>
      		<h2>2主体文本标题</h2>
      		<p>这里填写主要的文本内容</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;
  }
  
  /*内容区*/
  
  .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%);
  }

  
  

  0 0