定位实例练习

我们研究的第一个例子是一个经典的选项卡消息框，你想用一块小区域包括大量信息时，一个非常常用的特征。这包括含有大信息量的应用，比如策略战争游戏，比如从移动版的网页，屏幕狭小、空间有限；比如你可能想要放置许多信息的紧凑消息框，不用就会充满整个 UI。我们简单的例子完成后就会像下面这样：

备注： 你能看完整的示例，可运行在 info-box.html (source code)。检出它以理解你在本文章里要建立什么。

你可能会想：”为什么不仅仅做独立的选项卡为一个独立的网页，然后通过点击不同的标签来在不同的页面跳转来达到这个效果？“这样代码可能会简单一些，是的。但是这样每个独立的”页面“视图将会实际上是一个新加载的网页，跨视图更难保存信息，并把这个特征融入一个更大的 UI 设计。另外，所谓的”单页应用“正在变得非常流行——尤其是移动网页 UI——因为把一切的服务放在一个单独的文件上可以减少 HTTP 请求的数量来浏览所有内容，从而提高性能。

备注： 一些网络开发者甚至更超前，每次只加载一页的信息，并且使用 JavaScript 诸如 XMLHttpRequest特征动态改变信息显示。但是，在你此时的学习中，我们希望尽可能保持简单。接下来会有一些 JavaScript，但是只有一点。

在开始之前，我们需要你拷贝文件到本地，当作起始的 HTML 文件——info-box-start.html。保存到你的计算机合适的位置，然后在你的编辑器里打开。让我们看看包含在 body 里的 HTML 代码：

这样我们已经得到了一个元素带有类（class）为 info-box。此元素又包含一个 和一个 。无序列表包含三个列表项，列表项有链接在内，实际上将成为用于点击后显示内容面板的选项卡。 div 包含三个 元素，构成对应于每个选项卡的内容面板。每个面板包含一些示例内容。

这里的思路是我们将样式化选项卡看起来是一个标准的水平导航菜单，使用绝对定位样式化面板互相坐落其顶上。我们也给你一点 JavaScript 包含到你的页面上，当选项卡被按下时，显示对应的面板，并且样式化选项卡本身。你不需要在这个阶段了解 JavaScript 本身，但是你应该尽快学习一些基本的 JavaScript——你的用户界面越复杂，越需要一些 JavaScript 来实现你渴望的功能。