Имаме цялото съдържание, от което се нуждаем, на тази страница и имаме заглавката на място. Сега можем да стартираме CSSin 'съдържанието в дизайна, който сме направили във Photoshop.
Едно нещо, което направихме, беше да направим списъка със седем категории статичен. Това е само едно по-малко повикване wp_list_pages () и по този начин малко по-ефективно. Ако някога сменим категориите, това е толкова голямо нещо, не е голяма работа да преразгледаме този код.
Тук се нуждаем от дизайн на две колони по същество. Това е достатъчно лесно да се направи само с плаващи няколко div-а (или по-вероятно, като се използва нашата съществуваща мрежова рамка). Но това не ни помага да правим колони с „еднакви височини“, както диктува нашият дизайн тук. В края на краищата divs без зададени височини са толкова високи, колкото съдържанието вътре в тях. Задаването на височина на div обикновено е лоша идея.
За да получим колони с еднаква височина, ние го фалшифицираме с изчистена малка идея, където използваме една голяма обвивка div (която е висока колкото най-високата от колоните, които съдържа) и задаваме градиент на фона. Не избледняващ един цвят в друг градиент, а градиент с твърди спирания точно там, където колоната се счупи. Това ни дава оцветяването в сиво вляво и бяло вдясно, от което се нуждаем.
Прилагаме различните цветове на фона към всяка връзка към категория в лявата колона с поредица от селектори: nth-child (). Ние решаваме да го направим по този начин, а не класове, тъй като редът на цветовете е по-важен от съчетаването на цвета с категорията (това е по-скоро произволно).
Преди да приключим с тази скринкаст, ние правим ефекта на сянката (подчертано разделяне между колоните), като прилагаме псевдо елемент към навигацията, която се простира отгоре надолу на страницата. Този псевдоелемент има свой собствен градиент от черно към прозрачно, което го прави да изглежда като сянка.