#034：构建搜索，第一部分

现在我们已经用 Photoshop 设计了我们希望在搜索区域实现的功能，接下来我们开始用 HTML 和 CSS 构建它。我们已经加载了图标字体，所以我们将其放置在页面上。Font Explorer X 帮助我们显示放大镜的正确 HTML 字符。

我们在页眉包含文件里添加了标记，并开始一个全新的 Sass 文件（_search.scss）来编写这个新区域的 CSS。我们确保 CodeKit 知道这个新文件。不幸的是，在这些早期的屏幕截图中，CodeKit 有时需要一段时间才能刷新，我后来发现这仅仅是因为我在其中有一个特定的项目，它包含了太多文件。你可以通过缩小 CodeKit 监视的目录来解决这个问题。

我们使用绝对定位将搜索区域放置在页眉内，这样它就会位于主要内容区域的右侧和顶部。我们通过专门针对图标来调整放大镜的大小和位置。我们使用百分比定位，以便它能与我们的响应式设计紧密结合。我们还添加了:hover和:focus状态，以便很明显地显示你可以点击它。

最后，我们编写了一些 JavaScript 代码来打开和关闭搜索区域。我们本可以在 JavaScript 中添加动画（因为我们使用的是 jQuery），但实际上我们只是更改了 CSS 中的类名。我认为这叫做“基于状态的 CSS”，其中 JavaScript 只控制声明页面（或区域）处于何种状态的类名，而 CSS 控制页面在该状态下的外观（以及如何到达该状态）。这意味着我们正在 CSS 中进行诸如过渡之类的操作，我认为这才是它们应该在的位置，并且从长远来看会更好（例如，CSS 过渡是硬件加速的，而 JavaScript 过渡不是，它们只是内联样式的快速迭代）。