Apskatīsim vietnes režģa dizainu un sadalīsim atsevišķos komponentus. Izpētīsim, kāpēc pludiņš ir tik noderīgs, kā arī populāro paņēmienu pirmā tīmekļa režģa izveidošanai no trim straumēm un vietnes kājenes.
Lai izpētītu vietnes režģa uzbūvi, jums jāsaprot, kas ir "plūsma". Plūsma ir vietnes elementi, kas atrodas viens pēc otra. Piemēram, tie var būt div elementi, kas pēc noklusējuma iet viens pēc otra. Bet plūsmu var pārkārtot, un bloka elementu stāvokli var mainīt.
Plūsmas kontrolei mēs izmantojam pludiņa īpašību, kas var novietot bloku kreisajā vai labajā pusē. Pietiek CSS failā ierakstīt:
"klases vai bloka nosaukums" {pludiņš: pa labi / pa kreisi; }
Vienīgais pludiņa trūkums ir spēja "pārklāties" vienu bloku virs otra.
Lai izvairītos no sabraukšanas, mēs izmantojam skaidru: abi - šis īpašums noteiks plūsmu ap bloku. Mēs iestatām platumu un augstumu kā maksimālo un minimālo, lai vērtība tiktu veidota atbilstoši satura (teksta, attēlu) lielumam. Marža - iestatiet vērtību automātiska, lai ārējās piemales tiktu veidotas automātiski atkarībā no bloka atrašanās vietas.
Tā kā pludiņš var izvietot blokus divos virzienos, vietni ir ierasts sadalīt straumēs - pa kreisi un pa labi. Ja programmētājam ir nepieciešamas tikai divas plūsmas, tad viņš atstāj kreiso un labo pludiņu, bet, ja ir vairāk nekā divi, tad piemales pielāgo, izmantojot rezervi. Kā tas notiek:
. kolonna1 {pludiņš: pa kreisi; platums: 65px; min-augstums: 50px; labā mala: 9px; // 9 pikseļi no centrālā lodziņa}
2 straume:
. kolonna2 {pludiņš: pa kreisi; // uz kreiso bloku, bet bez "pārklāšanās", jo mēs izmantojām piemales platumu: 80px; min-augstums: 50px; }
3 straume:
. kolonna3 {pludiņš: pa labi; platums: 65px; min-augstums: 50px; }
Darbība ar kājeni (.footer):
.pēdulis {skaidrs: abi; // aptiniet abas puses}
Tā mēs izveidojām vietnes režģi, izmantojot pludiņu, kas sastāv no trim straumēm.
