У нас есть весь необходимый контент для вывода этой страницы, и у нас есть заголовок. Теперь мы можем начать CSSin содержимого в дизайн, который мы собираемся в Photoshop.
Мы сделали список из семи категорий статичным. Это всего лишь на один вызов wp_list_pages () меньше и, следовательно, немного более эффективно. Если мы когда-нибудь изменим категории, это настолько важно, что пересмотреть этот код не составит труда.
По сути, нам нужен двухколонный дизайн. Это достаточно легко сделать, просто переместив пару div (или, что более вероятно, используя нашу существующую сетку). Но это не помогает нам делать столбцы «одинаковой высоты», как того требует наш дизайн. В конце концов, блоки div без заданной высоты имеют высоту только содержимого внутри них. Как правило, установка высоты для div - плохая идея.
Чтобы получить столбцы одинаковой высоты, мы имитируем это с помощью небольшой аккуратной идеи, в которой мы используем один большой div-обертку (который имеет высоту самого высокого из столбцов, которые он содержит) и устанавливаем градиентный фон. Не градиент перехода от одного цвета к другому, а градиент с жесткими остановками прямо там, где столбец разрывается. Это дает нам нужную нам раскраску: серый слева и белый справа.
Мы применяем разные цвета фона к каждой ссылке категории в левом столбце с помощью серии селекторов: nth-child (). Мы решили сделать это таким способом, а не классами, потому что порядок цветов важнее, чем соответствие цвета категории (это довольно произвольно).
Прежде чем мы закончим этот скринкаст, мы создадим эффект тени (четкое разделение столбцов), применив псевдоэлемент к навигации, которая тянется сверху вниз по странице. Этот псевдоэлемент имеет собственный градиент от черного к прозрачному, что делает его похожим на тень.