Šajā lapas izvadē mums ir viss nepieciešamais saturs, un mums ir galvene. Tagad mēs varam sākt CSSinstalēt saturu dizainā, kāds mums ir Photoshop.
Viena lieta, ko mēs izdarījām, bija padarīt statisku septiņu kategoriju sarakstu. Tas ir tikai par vienu mazāk wp_list_pages () zvana un tādējādi nedaudz efektīvāks. Ja mēs kādreiz mainīsim kategorijas, tas ir tik liels, ka nav lielas problēmas atkārtoti pārskatīt šo kodu.
Mums šeit būtībā ir nepieciešams divu kolonnu dizains. Tas ir pietiekami viegli izdarāms, vienkārši peldot pāris divus (vai, visticamāk, izmantojot mūsu esošo tīkla sistēmu). Bet tas mums nepalīdz izveidot vienāda augstuma kolonnas, kā to šeit nosaka mūsu dizains. Galu galā divi bez noteikta augstuma ir tikai tikpat augsti kā saturs tajos. Augstuma iestatīšana div ir parasti slikta ideja.
Lai iegūtu vienāda augstuma kolonnas, mēs to viltojam ar mazu veiklu ideju, kur mēs izmantojam vienu lielu iesaiņojuma divu (kas ir tikpat augsts kā augstākais no kolonnām, ko tas satur) un iestatām gradienta fonu. Nevis izbalināt-no vienas krāsas uz citu gradientu, bet ar grūti apstājamiem gradientiem tieši tur, kur kolonna saplīst. Tas mums piešķir pelēko krāsu pa kreisi un baltu krāsu labajā pusē.
Katrai kategorijas saitei kreisajā kolonnā mēs izmantojam dažādas fona krāsas ar virkni: n-child () selektoru. Mēs nolemjam to izdarīt šādā veidā, nevis klasēs, jo krāsu secība ir svarīgāka nekā krāsas pielāgošana kategorijai (tas ir diezgan patvaļīgi).
Pirms mēs esam pabeiguši šo ekrāna apraidi, mēs veicam ēnas efektu (uzsvērtu kolonnu atdalīšanu), navigācijai, kas stiepjas no lapas augšdaļas līdz apakšai, piemērojot pseido elementu. Šim pseido elementam ir savs melnā krāsā caurspīdīgs gradients, kas padara to par ēnu.