Katsotaanpa sivuston ruudukkosuunnittelua ja eritellään yksittäiset komponentit. Tutkitaan, miksi kellunta on niin hyödyllistä, samoin kuin suosittu tekniikka ensimmäisen verkkoruudukon rakentamiseksi kolmesta virrasta ja sivuston alatunnisteesta.
Jos haluat tutkia sivuston ruudukon rakennetta, sinun on ymmärrettävä, mikä "virtaus" on. Virtaus on sivuston elementtejä, jotka sijaitsevat yksi toisensa jälkeen. Nämä voivat olla esimerkiksi div-elementtejä, jotka menevät oletusarvoisesti peräkkäin. Mutta virtaus voidaan järjestää uudelleen ja lohkoelementtien sijainti voidaan muuttaa.
Virtauksen hallitsemiseksi käytämme float-ominaisuutta, joka voi sijoittaa lohkon vasemmalle tai oikealle puolelle. Riittää, että kirjoitat CSS-tiedostoon:
"luokan tai lohkon nimi" {float: oikea / vasen; }
Ainoa uimurin haittapuoli on kyky "limittää" yksi lohko toisen päälle.
Välttämiseksi ajamisesta käytämme selvää: molemmat - tämä ominaisuus asettaa virtauksen lohkon ympärille. Asetamme leveyden ja korkeuden suurimmaksi ja pienimmäksi niin, että arvo muodostuu sisällön koon (teksti, kuvat) mukaan. Marginaali - aseta arvoksi automaattinen siten, että ulkoiset marginaalit muodostuvat automaattisesti lohkon sijainnista riippuen.
Koska uimuri voi sijoittaa lohkoja kahteen suuntaan, on tapana jakaa sivusto puroihin - vasemmalle ja oikealle. Jos ohjelmoija tarvitsee vain kaksi virtaa, hän jättää vasemman ja oikean kellukkeen, mutta jos niitä on enemmän kuin kaksi, hän säätää marginaaleja marginaalilla. Kuinka näin tapahtuu:
.sarake1 {kellua: vasen; leveys: 65px; min-korkeus: 50px; marginaali oikea: 9 kuvapistettä; // 9px keskiruudusta}
2 stream:
.sarake2 {kellua: vasen; // vasemmalle lohkolle, mutta ilman "päällekkäisyyttä", koska käytimme marginaalileveyttä: 80px; min-korkeus: 50px; }
3 stream:
.sarake3 {float: oikea; leveys: 65px; min-korkeus: 50px; }
Alatunnisteen (.footer) käsittely:
.jalka {selvä: molemmat; // kääri molemmat puolet}
Näin teimme sivustolle ruudukon käyttämällä kelluketta, joka koostui kolmesta virrasta.
