Layout oldalt az oldal segítségével a tömbök
Oldal elrendezése a folyamat kialakulásának a szerkezet a html-dokumentum, melynek eredménye egy internetes oldalon. A szerkezet egy weboldal határozza meg a megfelelő html-címkéket. Címkék - négyszögletes blokkok tartály tartalmát - nem jelennek meg a böngésző ablakában. Azt mondják, a böngésző a tartalom típusát, a böngésző alapján ezen információk tartalmát jeleníti meg - szöveges, illetve a média fájlokat.
Hogyan hozzunk létre az oldalt szerkezet segítségével blokkok (blokk elrendezés)
1. Hogyan lehet megtörni az oldal elrendezését a részben
Szokványos weboldal a következő részekből áll:
Ábra. 1. A fő részben az oldalonNem fogjuk használni az elem
és kérje meg neki a legnagyobb szélessége, a kitöltés, amely elválasztja a tartalmat a széleit a készülék egy kis képernyő felbontás, valamint a külső padding, így összehangolni a tartály közepén a szülői egység:
Tehát megvan a keret oldalunkon (lamellamagasság ebben az esetben a virtuális, mert a tartalom nélküli szakaszok nulla magasság).
2. Jelölés cap hely és a pozicionáló elemében
Folytassuk jelöléseket az első rész, az úgynevezett Web oldal fejlécében. elem
Helyezzük a logó a bal és a navigációs linkek - igazodik a jobb szélén a kupak (az egyszerűség kedvéért, adtam hozzá elemeket a fehér határ):
Ábra. 4. Hatás összeomlása tartalmazó blokkFelhívjuk figyelmét, hogy ha egyszer alkalmazandó csomagolást, a kalap eltűnt. Ez azért van, mert az úszó elemek (amelyre az adott tulajdonság float) eltávolítjuk a normál áramlását és a szülő szállítótartály többé nem látja a magasság, így eleme
Szintén hozzá függőleges bemélyedés elválasztó elemek belsejében a karimáját kalapok. Ennek eredményeként, a stílus lesz a következő formában:
Ábra. 5. Tisztítás adatfolyamTekintsük a helyzetet, amikor a képen szolgál logó. Hozzá kell tenni, közvetlenül a tag, vagy a háttérképet. A kép lesz a magassága, amely eltérhet a magassága a navigációs menü, így előttünk majd szembe a probléma a függőleges igazítását elemek kalapok.
Ábra. 6. logo képPéldánkban a logó magassága 38px. Ezért ki kell igazítani a magasságát a menü linkek közepén a sapka, meg kell kérni őket, a megfelelő sor magassága:
Ábra. 7. Illessze menü fejléc linkek
3. Készítsen egy rács a fő része az oldal
A fő rész egy oldalt gyakran áll a rács különböző szélességű blokkok. Rangsor ezek az egységek is végezzük az ingatlan úszó. Minden blokk sor obernom kiegészítő doboz class .row:
Ábra. 7. A háló szervezetben az oldalEgy elem osztályú .row fluxus tisztítás is alkalmazható:
Elválasztani a sorokat egymástól, akkor adjunk hozzá egy külső alsó francia:
A magassága rács egységek által meghatározott magasságban a tartalmát, így eltérő lehet:
Ábra. 8. Különböző magassága hálózati elemek blokk magassága lehet rögzíteni megadásával ez kifejezetten, például. sorban div. De ebben az esetben meg kell lenni abban, hogy a túl adaptív elrendezése blokkok tartalmát nem terjedhet túl a szélén a blokk.Ha azt szeretnénk, hogy a háttér színét a blokkok száma, valószínű, hogy ez lehet az alábbiak szerint történik: egy elem az osztály .row egy új osztályt, amely lehetővé teszi, csak stilizálhatja a számot (amelyet .row sor-on), rámutatunk a háttér színét, a kisebb a magassága blokk, és állítsa be saját színe a nagy blokk, vagyis így fog tenni a háttérben hordozó.
Ábra. 9. Háttér szubsztrátHa a fő részben az oldalon csak két háztömbnyire, a számos kiegészítő burkolat nem kell egészül ki:
4. Page Layout Pince
Basement oldal vagy lábléc rendszerint tartalmaz szerzői jogi információkat, további linkek, stb Mindez az információ is helyezünk a oszlopot, amely lehet azonos vagy különböző szélességben.