我们已经在这个页面上输出了所有需要的内容，并且 header 也已经就位。现在我们可以开始使用 CSS 将内容设计成我们在 Photoshop 中的设计。
我们做了一件事，就是将七个类别的列表设置为静态。这仅仅是减少了一个 wp_list_pages() 调用，从而提高了一点效率。如果我们将来更改类别，那是一件大事，重新审视这段代码也没有什么大不了的。
这里我们需要一个双列设计。这很容易用几个 div 浮动来实现（或者更有可能的是，使用我们现有的网格框架）。但这并不能帮助我们像设计中规定的那样创建“等高”列。毕竟，没有设置高度的 div 只有其内部内容的高度。在 div 上设置高度通常不是一个好主意。
为了获得等高的列，我们用一个巧妙的小想法来模拟它，即使用一个大的包装 div（其高度与其包含的最高列一样高）并设置渐变背景。不是渐变一种颜色到另一种颜色，而是在列断开的位置设置硬停止的渐变。这为我们提供了所需的左侧灰色和右侧白色的颜色。
我们使用一系列 :nth-child() 选择器，将不同的背景颜色应用于左侧列中的每个类别链接。我们选择这样做而不是使用类，因为颜色的顺序比将颜色与类别匹配更重要（它相当随意）。
在我们完成此屏幕截图之前，我们使阴影效果生效（列之间有明显的隔断），方法是将伪元素应用于导航，该导航从页面顶部延伸到底部。此伪元素具有自己的黑色到透明的渐变，使其看起来像阴影。