Css - elrendezését és elhelyezkedését a középső oldalak a helyszín
Hogyan lehet a CSS honlapon → Lessons → elrendezését és elhelyezkedését a középső oldalak a helyszín
Elrendezését és elhelyezkedését a középső oldalak a helyszín kérdése kreatív és kezdők gyakran okoz nehézségeket. Tehát nézzük meg, hogyan kell csinálni. Tegyük fel, hogy szeretnénk, hogy egy oldal ezen szerkezet:
Oldalunk van osztva négy blokk: kalapok (header), a menü (menü), a tartalom (content) és az alsó oldal (lábléc). Összehangolni a oldal közepén, hogy ezeket az egységeket a négy egy fő egység (fő):
CSS központú oldalairaA példa ez a struktúra több lehetőség.
Layout és gumi központosító oldalon
Ha az elrendezés a gumi fő oldalon által használt készülék -%, mert a helyén kell feszíteni szélesség, és elfoglalják az összes rendelkezésre álló helyet.
Következésképpen a szélessége a blokk „fejléc” és „lábléc” 100% lenne a képernyő szélességét. blokk szélessége „menü” kell lennie 30%, és a készülék „tartalom” kell közelében található a „menü” blokk, azaz kell egy bal (Margó-balra) a szélessége egyenlő a szélessége a blokk „menü”, azaz a 30%.
Blokkokhoz „menü” és a „tartalom” kerültek egymás mellé, hogy a blokk „menü” úszó, és tolja a bal szélén. Szintén a háttér színét (háttér) a mi egység. Most írjuk le az összes stylesheet (style.css az oldalon)
A magasság a blokkokat arra kérték hagyományosan eredményt kell nézni. Nézd meg az oldal böngészőben:
Ha átméretezi a böngésző ablakot, meg fogja változtatni a szélességét minden blokkot. Ez nem mindig kényelmes, mert nyújtás során a menü blokk üres tér van. Ezért több szélesség „menü” egységgel rögzített, hadd és mi fogja megtenni. Cseréjéhez ezt az értéket a stíluslapon megfelelő tulajdonságok:
Most oldalunkat feszített természetesebb. Amikor egy gumi elrendezés oldalak elfoglalja a teljes szélessége a képernyő, így középre oldalak nem szükséges.
De ha akarod, hogy az oldal volt egyenlő árrés a bal és a jobb oldali a képernyőn. Ehhez adjunk hozzá egy stílust blokk „fő”, ami egy tartály az összes többi egység:
Most a oldal így fog kinézni:
Elrendezését és elhelyezkedését a helyén, egy rögzített szélességű
Ebben az esetben van egy rögzített méret a mi egységek:
Most a lapot a bal szélén a képernyőn.
Ebben az esetben, az összehangolás a központ oldalt az oldal lehet tenni a következő módon. Emlékezzünk arra, hogy a lapnak a kulcsszó „test”, amely akkor is meg a szélesség és néhány padding.
Tesszük: mi határozza meg a kulcsszó „test” szélessége 800 képpont (mint a „fő” egység), és egy bal francia (padding-balra) a 50% -ot. Ezután az összes „fő” blokk tartalmát jelenik meg a jobb oldalon a képernyő (vagyis a közepétől jobbra):
Hogy blokkolja a „fő” volt található, a képernyő közepén, az szükséges, hogy a középpontja egybeesik a „test” a közepén, a címkét. Ie meg kell mozgatni a blokk „fő” a bal felére a mérete. szélessége a blokk „fő” - 800 képpont, ezért szükséges feltenni neki „margin-left: -400px” tulajdonság. Igen, ez a tulajdonság lehet negatív, akkor a bal margó csökken (azaz balra tolódik). És ez az, amire szükségünk van.
Most stylesheet így néz ki:
És mi az oldal böngészőben található kellős közepén:
Megvizsgáltuk a két lehetőség vonalba közepén oldalt az oldal, sőt, ők nem dogma. Lehet kísérletezni, és jön a saját verzióját, csak ellenőrzi a munkáját a különböző böngészőkben. Sajnos úgy tűnik, hogy a jó a Firefox és az Opera, teljesen érthetetlen megjelenik az IE és fordítva. És emlékeznünk kell arra, hogy.
Sok szerencsét a kreatív küldetést!