</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>
<img src="images/assassin.jpg" id="img-example" class="img-rounded" data-img="true
<span class="alt-img"></span>
<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 { background: #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、查看效果。
