Létrehozása utazók téma menü segítségével css rács
Teljes képernyős demo a végeredmény.
Alapvető az oldal szerkezetének
Először hozzon létre egy szabványos oldal. Hozzunk létre valami ilyesmit:
Szabványos oldal szerkezetét. A kis nézetablak összes elhajt egy oszlopba, nagy kijelzők eltekintve az oldalon. Az egyszerűség kedvéért a nav címke kék színű. Jelölés:
Gyakorlati tanfolyam adaptív layout Landing semmiből!
Ismerje meg a semmiből elő adaptív Landing HTML5 és a CSS3 a következő 6 napon
Adjuk hozzá a vizuális stílusok és szabályok a hálóra.
hozzon létre egy rács
Először is, csomagolja valamennyi szerkezeti elem a tartály - ez lesz a Grid konténer. Elviszem
. Most adjunk hozzá néhány alapvető stílusokat a rács:A fenti, kijelentjük, hogy a tartálynak, hogy kijelző: rács;, van egy oszlop (opcionális most adunk, de a teljesség kedvéért felírni most). Határolójelek a sejtek között a rács kell 10px.
Ahhoz, hogy ez egy kicsit tisztább, adjunk pár vizuális stílusok:
Így az adaptív oldal
Add a média kérést, amikor elér egy bizonyos méretet nézetablak elrendezése is megváltozott (vegye 600px).
Most a nagy háló képernyők változik id-template-oszlopok: ismétlés (4, 1fr), ami nekünk a négy oszlop egyenlő szélességű. Ezután meg kell állítani a szélesség az összes szerkezeti elemek. Címkék fejléc, lábléc nav és elfoglalja az összes 4 oszlop, de csak három részben. A fennmaradó oszlop automatikusan bekerül félre.
Végül a stílusok változtatni a menü nézet:
Amit kapott:
Hozzon létre egy menü, hogy elhagyja
Egy tökéletes példa arra, hogy a CSS pozicionálás tud dolgozni szerkezeti elemek még a bejelentett nettó. Mi lesz a menü, akkor távolítsa el a dokumentumot áramlás és spozitsioniruem ki a képernyőt. A többi a rácselemek lesznek érvényben.
Írjunk egy másik adathordozóra lekérdezés. Van egy kérelmet min-width, most meg kell írni stílusok max-width. Amint az ablakon eléri a mágikus értéket 600px, meg kell a menü volt elrejtve ki a képernyőn:
Gyakorlati tanfolyam adaptív layout Landing semmiből!
Ismerje meg a semmiből elő adaptív Landing HTML5 és a CSS3 a következő 6 napon
Megkérdeztük a rögzített szélességű a menüt, és helyezzük el balra úgy, hogy teljesen eltűnt.
Mi használjuk a pozíció fix, de akkor is figyelembe abszolút. Minden attól függ, hogy szeretnénk-e a menüt görgeti az oldalt vagy sem.
A kód, akkor veszi észre az átmenetet ingatlan, akkor fog működni, ha hozzáadjuk a kapcsolót. Mi folyamatosan azt mutatják, a menüsor segítségével a transzformáció. Köszönöm Rachel Nabors és Joe Zimmerman eszembe, hogy átalakítsa sokkal jobb teljesítmény szempontjából animáció, mint a helyzet!
kapcsoló
Elbújtunk Étlapunkon, most létre kell hozni egy kapcsolót, hogy vissza, amikor szükség van rá. Link hozzáadása a menüt, és zárja be.
Adjuk hozzá a fejléc:
Megjegyzés: A részazonosítóból ilyen módon felhasznált teszi, hogy ha valaki rákattint a linkre, tárolja a böngésző előzményeit. A felhasználók nem tetszik! Köszönöm Joe Zimmerman, amely rámutatott, hogy azt.
Adjuk hozzá a következő kódot a max-width tulajdonság:
És mégis! A kapcsoló kész.
Amit kapott:
következtetés
Végünk! Elhoztam a stílus legalább annyira, hogy ne zavarja velünk. De ne habozzon, hogy hozzon létre a design. Lehet, hogy olyan, mint a JS kapcsoló helyett: cél, akkor már mindent, amire szüksége van. Remélem tetszett ez a kis lecke a rács. Figyelje az új órákat!
Felülvizsgálat: Team webformyself.
Gyakorlati tanfolyam adaptív layout Landing semmiből!
Ismerje meg a semmiből elő adaptív Landing HTML5 és a CSS3 a következő 6 napon
A legtöbb IT hírek és webfejlesztés A csatorna-távirat
