特效描述: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>