Să aruncăm o privire la proiectarea grilei site-ului și să descompunem componentele individuale. Să explorăm de ce float-ul este atât de util, precum și tehnica populară pentru construirea primei rețele web din trei fluxuri și un subsol al site-ului.
Pentru a studia construcția rețelei unui site, trebuie să înțelegeți ce este un „flux”. Fluxul sunt elementele site-ului, localizate unul după altul. De exemplu, acestea pot fi elemente div care merg unul după altul în mod implicit. Dar fluxul poate fi rearanjat, iar poziția elementelor blocului poate fi modificată.
Pentru a controla fluxul, folosim proprietatea float, care poate plasa blocul pe partea stângă sau dreaptă. Este suficient să scrieți în fișierul CSS:
„numele clasei sau blocului” {float: dreapta / stânga; }
Singurul dezavantaj al plutitorului este capacitatea de a „suprapune” un bloc peste altul.
Pentru a evita rularea, folosim clar: ambele - această proprietate va seta fluxul în jurul blocului. Setăm lățimea și înălțimea, ca maxim și minim, astfel încât valoarea să se formeze în funcție de dimensiunea conținutului (text, imagini). Marja - setați valoarea la auto astfel încât marjele externe să se formeze automat în funcție de locația blocului.
Deoarece float poate plasa blocuri în două direcții, este obișnuit să împărțiți site-ul în fluxuri - stânga și dreapta. Dacă programatorul are nevoie doar de două fluxuri, atunci lasă plutitorul stânga și dreapta, dar dacă sunt mai mult de două, atunci ajustează marginile folosind marginea. Cum se întâmplă acest lucru:
.column1 {float: left; lățime: 65px; min-înălțime: 50 px; margine-dreapta: 9px; // 9 px din caseta centrală}
2 flux:
.column2 {float: left; // în blocul din stânga, dar fără „suprapunere”, deoarece am aplicat lățimea marginii: 80px; min-înălțime: 50 px; }
3 flux:
.column3 {float: right; lățime: 65px; min-înălțime: 50 px; }
Gestionarea subsolului (.footer):
.footer {clar: ambele; // înfășurați ambele părți}
Așa am făcut o grilă pentru site folosind float, formată din trei fluxuri.
