css3响应式布局点击导航页面滚动切换效果

代码结构

1. 引入CSS

<link href='http://fonts.useso.com/css?family=Josefin+Slab:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/simple.css" />

2. HTML代码

<div class="container">
	<div class="st-container">
		<input type="radio" name="radio-set" checked="checked" id="st-control-1" />
		<a href="#st-panel-1">Serendipity</a>
		<input type="radio" name="radio-set" id="st-control-2" />
		<a href="#st-panel-2">Happiness</a>
		<input type="radio" name="radio-set" id="st-control-3" />
		<a href="#st-panel-3">Tranquillity</a>
		<input type="radio" name="radio-set" id="st-control-4" />
		<a href="#st-panel-4">Positivity</a>
		<input type="radio" name="radio-set" id="st-control-5" />
		<a href="#st-panel-5">Passion</a>
		<div class="st-scroll">
			<!-- Placeholder text from http://hipsteripsum.me/ -->
			<section class="st-panel st-color" id="st-panel-2">
				<div class="st-deco" data-icon="2"></div>
				<h2>Happiness</h2>
				<p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p>
			</section>
			<section class="st-panel" id="st-panel-3">
				<div class="st-deco" data-icon="B"></div>
				<h2>Tranquillity</h2>
				<p>Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>
			</section>
			<section class="st-panel st-color" id="st-panel-4">
				<div class="st-deco" data-icon="x"></div>
				<h2>Positivity</h2>
				<p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>
			</section>
			<section class="st-panel" id="st-panel-5">
				<div class="st-deco" data-icon="Ç"></div>
				<h2>Passion</h2>
				<p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p>
			</section>
		</div>
	<!-- // st-scroll -->
	</div>
<!-- // st-container -->
</div>