我们在这里稍微跳了一点。这是一个非常全面的屏幕录制系列，但它只有大约 40 个小时，当然，这个实际项目实际上更像是几百个小时。在本例中，向前跳是稍微调整一下双页的样式。我们将在开头逐步完成这些更改。
左右两页有一个共享类名和一个不同的类名。我发现这在很多不同的网页设计场景中非常常见。在本例中，页面共享相同的渐变和相同的尺寸。但是，当我们应用 CSS3 的 `skew()` 变换时，它们会有所不同。这给了我们一种很酷的“打开的书”效果。由于所有这些效果都是使用 CSS 创建的，因此它们可以很好地缩放（以一种图像几乎肯定无法做到 的方式）。
我们之前有一个巧妙的等高解决方案，但不幸的是，由于我们巧妙的打开书的倾斜效果，它失效了。相反，我们只使用了一点 JavaScript。
首先，在查看 JavaScript 时，我们编写了一行代码，将隐藏所有没有子元素的“字母”。例如，没有以“Z”开头的选择器，但我们有一个已发布的页面称为“Z”，只是为了全面性。我们使用超实用的 jQuery `:has()` 选择器发现它们（然后隐藏它们）。
对于等高，我们测量了两个列，确定哪个更高，然后将它们都设置为最高的那个。由于 @font-face 加载需要一点时间并影响高度，因此我们必须使用一个略微笨拙的 setTimeout 才能使其正常工作。最终，我们可以使用某种 字体加载回调。（或者，这可能过分了）。
然后我们继续处理单个年鉴页面。现在快速前进！我们已经做了很多次这种事情，因此我们正在更快地移动并不奇怪。我们本质上以相同的方式将这个模板塑造成型，就像我们以前对单个博客帖子、通用页面或任何类似内容进行过样式设置一样。
我们使用“黑色条”作为面包屑导航，将这种设计模式确立为一种我们将一次又一次地用于站点区域导航的东西。