Vaatame saidi võrgu kujundust ja jagame üksikud komponendid. Uurime, miks ujuk on nii kasulik, samuti populaarseimat tehnikat esimese veebivõrgu ehitamiseks kolmest voost ja saidijalusest.
Saidi võrguehituse uurimiseks peate mõistma, mis on "voog". Vool on saidi elemendid, mis asuvad üksteise järel. Näiteks võivad need olla div elemendid, mis lähevad vaikimisi üksteise järel. Kuid voogu saab ümber korraldada ja ploki elementide asukohta saab muuta.
Voo juhtimiseks kasutame ujuki omadust, mis võib asetada ploki vasakule või paremale küljele. Piisab CSS-faili kirjutamisest:
"klassi või ploki nimi" {float: parem / vasak; }
Ainus ujuki puudus on võime üks plokk teise otsa "kattuda".
Ülejooksmise vältimiseks kasutame selget: mõlemad - see omadus määrab voo ümber ploki. Seadistame laiuse ja kõrguse nii maksimaalseks kui ka minimaalseks, et väärtus kujuneks vastavalt sisu suurusele (tekst, pildid). Marginaal - määrake väärtuseks auto nii, et välised veerised moodustuksid automaatselt vastavalt ploki asukohale.
Kuna ujuk võib plokke paigutada kahes suunas, on tavaks jagada sait ojadeks - vasakule ja paremale. Kui programmeerijal on vaja ainult kahte voogu, jätab ta vasak- ja parempoolse ujuki, kuid kui neid on rohkem kui kaks, reguleerib ta veeriseid marginaali abil. Kuidas see juhtub:
.veerg1 {ujuk: vasak; laius: 65px; min-kõrgus: 50px; paremäär: 9px; // 9px keskkastist}
2 voogu:
.veerg2 {ujuk: vasak; // vasakule plokile, kuid ilma "ülekatteta", kuna rakendasime veerise laiust: 80px; min-kõrgus: 50px; }
3 voog:
.veerg3 {ujuk: parem; laius: 65px; min-kõrgus: 50px; }
Jalaga (.footer) tegelemine:
.jalg {selge: mõlemad; // mähkige mõlemad pooled}
Nii tegime saidi jaoks ujuki abil ruudustiku, mis koosnes kolmest voost.
