1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代艨位雅剖码。<div id="single"> <div data-target="home" id="home"> <div class="content-resizer"> <h1 id="logo">第一页</h1> <h2 class="message">Are you ready to take the tour?</h2> <p> <a href="#" data-link="about" class="btn-normal">内容开始</a> </p> </div> </div> <div data-target="about" id="about"> <div class="content-resizer"> <h2 class="message">第二页</h2> <a href="#" data-link="home" class="btn-normal">Back</a> <a href="#" data-link="examples" class="btn-normal">下一页</a> </div> </div> <div data-target="examples" id="examples"> <div class="content-resizer"> <h2 class="message">第三页</h2> <p> <img src="images/assassin.jpg" id="img-example" class="img-rounded" data-img="true" width="440" alt="Assassin's Creed 3" /> </p> <p> <span class="alt-img"></span> </p> <a href="#" data-link="about" class="btn-normal">Back</a> <a href="#" data-link="contact" class="btn-normal">下一页</a> </div> </div> <div data-target="contact" id="contact"> <div class="content-resizer"> <h2 class="message">第四页</h2> <a href="#" data-link="examples" class="btn-normal">Back</a> <a href="#" data-link="home" class="btn-normal">返回第一页</a> </div> </div></div>
4、书写css代码。* { padding: 0; margin: 0; }body { backgrou荏鱿胫协nd: #034368; }#logo, .message { color: #fff; }#logo { font-size: 100px; text-shadow: 1px 1px 0 rgba(0, 0, 0, .5); }.message { font-size: 40px; margin: 20px 0; }.btn-normal { padding: 8px 20px; border-radius: 5px; background: #56bffc; color: #fff; text-decoration: none; font-family: "Lucida Sans", sans-serif; }.content-resizer { width: 940px; margin: 0 auto; }.img-rounded { border-radius: 5px; margin: 5px auto 20px auto; }.alt-img { padding: 5px; background: #fff; color: #333; display: inline-block; border-radius: 4px; margin-bottom: 20px; }div[data-target] { margin: 0; padding: 0; position: relative; overflow: hidden; }div[data-target] > div { text-align: center; position: relative; }div#home { background: #066093; }div#about { background: #0670ad; }div#examples { background: #0880c4; }div#contact { background: #0b9bee; }
5、书写并添加js代码。<script src="js/jquery-1.9.1.min.js"></script><script src="js/jquery.easing.js"></script><script src="js/single-0.1.0.js"></script>
6、代码整体结构。
7、查看效果。
