Layout oldalt az oldal segítségével a tömbök

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:

Layout oldalt az oldal segítségével a tömbök
Ábra. 1. A fő részben az oldalon

Nem fogjuk használni az elem

. mivel nem minden böngésző támogatja.

Layout oldalt az oldal segítségével a tömbök
Ábra. 2. A fő részben az oldalon a kijelölt tartályban

é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

csoportok háttér-információk és navigációs segédeszközök az oldalon / oldalon. Adjuk hozzá a címke belső
Logó és navigációs linkek:

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):

Layout oldalt az oldal segítségével a tömbök
Ábra. 4. Hatás összeomlása tartalmazó blokk

Felhí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

és egy elem egy osztályon belül .container berobbant. E helyzet orvoslása érdekében, használja a patak tisztítására elem az osztály .container:







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:

Layout oldalt az oldal segítségével a tömbök
Ábra. 5. Tisztítás adatfolyam

Tekintsü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.

Layout oldalt az oldal segítségével a tömbök
Ábra. 6. logo kép

Pé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:

Layout oldalt az oldal segítségével a tömbök
Ábra. 7. A háló szervezetben az oldal

Egy 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:

Layout oldalt az oldal segítségével a tömbök
Á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ó.

Layout oldalt az oldal segítségével a tömbök
Ábra. 9. Háttér szubsztrát

Ha 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.