#92：构建单个画廊页面

在我们继续构建单个画廊页面的模板时，我们有一个 Photoshop 的线框图可供参考。

首先，我们为“下一个”和“上一个”链接设置了样式。它们位于画廊栏中绝对定位的盒子内，这样我们就可以将它们居中在页面上，尽管栏中已经存在其他按钮和内容。它们采用与“提交一个”按钮相同的类，因此保持一致性。

接下来，我们有一个非常窄的左侧列，用于放置文本。我们从 1/8 7/8 的网格开始，但 1/8 太窄了。我们将其更改为 1/4 3/4，但又太宽了。所以就像传说中的金发姑娘一样，1/6 5/6 正好合适。

我们在那个窄列中进行了一些排版工作，添加了标题（当然，在<h1>标签中，因为它是在页面上最重要的标题）、描述和其他部分。大多数排版都基于我们简单而稳固的排版设置自动完成。

5/6 的网格全部用于图像。非常大，这很棒。它具有浅灰色的背景，就像博客文章中的图像一样（例如<figure>）。

我们考虑如何为标签设置一些花哨的样式。我们在 CodePen 上查看了一下（这是“标签”标签的链接，元提醒）。我们最终认为这有点过头了，并将其保留为普通链接。

我们以最简单的方式之一使“全尺寸”按钮工作，打开一个新窗口，该窗口的尺寸为全尺寸图像的尺寸，并在其中显示图像。这就像 2000 年代初的模态框！但我喜欢它。它很简单，不需要很多代码（比如灯箱），并且很明显可以与之交互。如果你问我，它甚至更好。