Pogledajmo dizajn mreže i razložimo pojedine komponente. Istražimo zašto je float toliko koristan, kao i popularnu tehniku za izgradnju prve mrežne mreže iz tri struje i podnožja web stranice.
Da biste proučavali mrežnu konstrukciju mjesta, morate razumjeti što je "protok". Tok su elementi stranice koji se nalaze jedan za drugim. Na primjer, to mogu biti div elementi koji se prema zadanim postavkama idu jedan za drugim. Ali protok se može preurediti i položaj elemenata bloka može se promijeniti.
Za kontrolu protoka koristimo svojstvo float, koje blok može smjestiti na lijevu ili desnu stranu. Dovoljno je upisati u CSS datoteku:
"naziv klase ili bloka" {float: desno / lijevo; }
Jedini nedostatak plovka je sposobnost "preklapanja" jednog bloka na drugi.
Da ne bismo pregazili, koristimo clear: both - ovo svojstvo će postaviti protok oko bloka. Širinu i visinu postavljamo kao maksimalnu i najmanju, tako da se vrijednost oblikuje prema veličini sadržaja (tekst, slike). Margin - postavite vrijednost na auto tako da se vanjske margine automatski formiraju ovisno o mjestu bloka.
Budući da plovak može postavljati blokove u dva smjera, uobičajeno je mjesto dijeliti na potoke - lijevi i desni. Ako programeru trebaju samo dva toka, on ostavlja lijevo i desno plutajuće, ali ako ih je više od dva, onda podešava margine pomoću margine. Kako se to događa:
.column1 {float: left; širina: 65px; min-visina: 50px; margina-desno: 9 piksela; // 9 piksela iz središnjeg okvira}
2 stream:
.column2 {float: left; // u lijevi blok, ali bez "preklapanja", budući da smo primijenili širinu margine: 80px; min-visina: 50px; }
3 tok:
.column3 {float: desno; širina: 65px; min-visina: 50px; }
Rješavanje podnožja (.footer):
.footer {jasno: oboje; // omotavanje oko obje strane}
Tako smo napravili mrežu za web mjesto pomoću float-a, koji se sastoji od tri struje.
