Poďme sa pozrieť na návrh mriežky stránky a rozoberme jednotlivé komponenty. Poďme preskúmať, prečo je float taký užitočný, a tiež populárna technika na zostavenie prvej webovej mriežky z troch prúdov a päty stránky.
Ak chcete študovať štruktúru siete na webe, musíte pochopiť, čo je „tok“. Tok sú prvky webu umiestnené jeden za druhým. Môžu to byť napríklad prvky div, ktoré predvolene idú jeden za druhým. Ale prietok je možné preskupiť a zmeniť polohu blokových prvkov.
Na riadenie toku používame vlastnosť float, ktorá môže umiestniť blok na ľavú alebo pravú stranu. Do súboru CSS stačí napísať:
"názov triedy alebo bloku" {float: vpravo / vľavo; }
Jedinou nevýhodou plaváka je schopnosť „prekrývať“jeden blok nad druhým.
Aby sme sa vyhli prekročeniu, používame clear: both - táto vlastnosť nastaví tok okolo bloku. Nastavíme maximálnu a minimálnu šírku a výšku, aby sa hodnota formovala podľa veľkosti obsahu (text, obrázky). Okraj - nastavte hodnotu na auto, aby sa vonkajšie okraje vytvorili automaticky v závislosti od umiestnenia bloku.
Pretože plavák dokáže umiestniť bloky v dvoch smeroch, je obvyklé deliť web na prúdy - ľavý a pravý. Ak programátor potrebuje iba dva prúdy, potom nechá ľavý a pravý plavák, ale ak sú viac ako dva, upraví okraje pomocou okraja. Ako sa to stane:
.column1 {float: left; šírka: 65px; minimálna výška: 50 pixelov; pravý okraj: 9 pixelov; // 9px od stredového poľa}
2 stream:
.column2 {float: left; // do ľavého bloku, ale bez „prekrývania“, pretože sme použili šírku okraja: 80px; minimálna výška: 50 pixelov; }
3 stream:
.column3 {float: right; šírka: 65px; minimálna výška: 50 pixelov; }
Zaobchádzanie s pätou (.footer):
.footer {clear: both; // obal okolo oboch strán}
Takto sme pomocou plaváka vytvorili mriežku pre web pozostávajúcu z troch prúdov.
