Šiame puslapyje turime visą reikiamą turinį ir antraštę. Dabar mes galime pradėti „CSS“ turinį pritaikyti „Photoshop“ dizainui.
Vienas dalykas, kurį padarėme, buvo statinis septynių kategorijų sąrašas. Tai tik vienas mažiau wp_list_pages () skambutis ir todėl šiek tiek efektyvesnis. Jei kada nors pakeisime kategorijas, tai yra toks didelis dalykas, kad nėra didelio reikalo dar kartą peržiūrėti šį kodą.
Čia mums iš esmės reikia dviejų stulpelių dizaino. Tai pakankamai lengva padaryti tiesiog plaukiant pora divų (arba labiau tikėtina, naudojant mūsų esamą tinklelio sistemą). Bet tai nepadeda mums sukurti „vienodo aukščio“ stulpelių, kaip čia diktuoja mūsų dizainas. Galų gale, divai be nustatyto aukščio yra tik tokie aukšti, kaip jų viduje esantis turinys. Aukščio nustatymas ant div yra paprastai bloga idėja.
Norėdami gauti vienodo aukščio stulpelius, mes jį suklastojame su maža idėja, kur mes naudojame vieną didelę apvyniojimo divą (kuris yra toks pat aukštas kaip aukščiausias iš jame esančių stulpelių) ir nustatome gradiento foną. Ne išnykimas vienos spalvos gradientu, bet gradientas su sunkiais sustojimais ten, kur lūžta kolona. Tai suteikia mums pilkos spalvos kairėje ir baltos spalvos dešinėje mums reikalingą spalvą.
Kiekvienai kategorijos nuorodai kairiajame stulpelyje pritaikome skirtingas fono spalvas: n-vaiko () selektorių serija. Mes nusprendžiame tai padaryti ne klasėmis, nes spalvų tvarka yra svarbesnė nei spalvų derinimas prie kategorijos (tai gana savavališkai).
Prieš baigdami naudoti šią ekrano kopiją, padarome šešėlio efektą (pabrėžtiną stulpelių atskyrimą), pritaikydami pseudo elementą navigacijai, kuri tęsiasi nuo puslapio viršaus iki apačios. Šis pseudo elementas turi savo nuo juodos iki skaidrios gradiento, dėl kurio jis atrodo kaip šešėlis.