Pažvelkime į tinklelio dizainą ir suskirstykime atskirus komponentus. Panagrinėkime, kodėl plūdė yra tokia naudinga, taip pat populiarią techniką, kaip sukurti pirmąjį tinklo tinklą iš trijų srautų ir svetainės poraštės.
Norėdami ištirti svetainės tinklelio konstrukciją, turite suprasti, kas yra „srautas“. Srautas yra svetainės elementai, išdėstyti vienas po kito. Pavyzdžiui, tai gali būti „div“elementai, kurie pagal numatytuosius nustatymus eina vienas po kito. Bet srautas gali būti pertvarkytas ir blokinių elementų padėtis gali būti pakeista.
Norėdami kontroliuoti srautą, mes naudojame plūduriuojančią savybę, kuri gali padėti bloką kairėje arba dešinėje pusėje. Pakanka parašyti CSS faile:
"klasės ar bloko pavadinimas" {float: dešinė / kairė; }
Vienintelis plūdės trūkumas yra galimybė „perdengti“vieną bloką ant kito.
Norėdami išvengti pervažiavimo, mes naudojame aiškų: abu - ši savybė nustatys srautą aplink bloką. Mes nustatome plotį ir aukštį, kaip didžiausią ir mažiausią, kad vertė būtų suformuota atsižvelgiant į turinio (teksto, vaizdų) dydį. Marža - nustatykite vertę į automatinę, kad išorinės paraštės būtų formuojamos automatiškai, priklausomai nuo bloko vietos.
Kadangi plūdė blokus gali dėti dviem kryptimis, svetainę įprasta padalyti į srautus - į kairę ir į dešinę. Jei programuotojui reikia tik dviejų srautų, jis palieka kairę ir dešinę plūdes, bet jei jų yra daugiau nei dvi, jis pakoreguoja paraštes naudodamas paraštę. Kaip tai vyksta:
.stulpelis1 {plūdė: kairė; plotis: 65px; min. aukštis: 50 taškų; paraštė-dešinė: 9 taškų; // 9 taškų iš centrinio langelio}
2 srautas:
.2 kolona {plūdė: kairė; // į kairįjį bloką, bet „nepersidengiant“, nes pritaikėme paraštės plotį: 80px; min. aukštis: 50 taškų; }
3 srautas:
.stulpelis3 {plūdė: dešinė; plotis: 65px; min. aukštis: 50 taškų; }
Kaip elgtis su poraštėmis (.footer):
.pėdas {aišku: abu; // apvyniokite abi puses}
Taip mes sukūrėme tinklelį naudodami plūdę, susidedančią iš trijų srautų.
