Homepage » Coding » HTML5 bemutató Hogyan készítsünk egy terméklapot
HTML5 bemutató Hogyan készítsünk egy terméklapot
Ez a cikk a mi része "HTML5 / CSS3 oktatóanyagok sorozat" - szentelt, hogy segítsen neked egy jobb tervező és / vagy fejlesztő. Kattints ide több cikket láthat ugyanazon sorozatból.
Ebben a bejegyzésben egy olyan fantasztikus projektet fogunk dolgozni, amely egyetlen, az iPhone 4S-t kínáló terméklapot hoz létre, és ebben a projektben végrehajtjuk azokat a módszereket is, amelyeket az előző hozzászólásokban megvitattunk; a elem és a negációs választó.
Kezdjük el.
A HTML5 jelölés
Először létre kell hoznunk egy html dokumentum a következő jelöléssel:
Apple iPhone 4 - 16 GB
A legcsodálatosabb iPhone még.
A gyorsabb kétmagos A5 chip. A 8MP-s fényképezőgép az új optikával is 1080p HD videót készít. És bevezette Siri-t. Ez még a legcsodálatosabb iPhone.
A termék jellemzői
8 megapixeles kamera teljes 1080p videofelvételsel
Siri hangja asszisztens
iCloud
Légnyomtatás
Retina kijelző
Fotó- és videomegjelölés
Több új címkét használunk a HTML5 specifikációból, mint például a fejléc, hgroup, ábra, szakasz, és egy, amit korábban beszéltünk; a részletek és összefoglalás címke.
Azonban nem fogunk ásni ezekbe a címkékbe, nem azért, mert nem vagyunk hajlandók, hanem inkább ezek az alapvető témák, amelyek könnyen megtalálhatók máshol. Tehát, ha tényleg új vagy a HTML5-ben, javaslom, hogy olvassa el az alábbi címkékre vonatkozó hivatkozásokat; részletesen kifejtették őket:
Beszéljünk a szemantikáról
A HTML5 fejlécelem
A hgroup elem
HTML5 címke hivatkozás
Most nézzük meg oldalunk első megjelenését.
Nos, mindenféle stílus nélkül érzi magát. A legfelső helyen van a fejléc, majd a kép, a leírás és végül a 'Vásárlás most' gombra kattint. Most felugrassuk ezt az oldalt.
A stílusok
Elindítjuk az összes alapértelmezett stílust normalizálva ezzel a stíluslappal, és hozzáadunk egy gradiens hátteret a html címke.
Ne feledje, hogy termékeink mindegyike csomagolva van div termékcsaláddal. Tehát itt szeretnénk központosítani a csomagolást, és beállítani a szélességet 650px.
.csomagolás szélesség: 650px; margó: auto; párnázás: 25px 0px;
A fejlécrész
A fejlécrészben két fejléc van h1 és h4, tehát nézzük meg ezeket az elemeket.
Jól néz ki, de a részletek címkéje még mindig nem működik (kivéve a Chrome-ot), így nézzük a következő gombot.
A gomb
A gombstílusokhoz az Apple.com áruházban található példányokat utánozzuk. És itt van az összes szintaxis, amire szüksége van ahhoz, hogy a stíluslapot a gombhoz hozza.
Mint mindig, az IE (Internet Explorer) mindig problémát okoz; ha 9-nél alacsonyabb IE-ben nyitja meg ezt az oldalt, az oldal nem lesz stílusos.
Ez azért van, mert az Internet Explorer nem ismeri fel az új elemeket (szakasz, fejléc, stb.), így azok a stílusok, amelyeket nem sikerült alkalmazni. Így a következő lépésben megoldjuk ezt a problémát.
A böngésző támogatásának tesztelése
Korábbi bejegyzésünkben a böngésző támogatását a polifillet használó részletelemekhez használtuk; a nem támogatott böngészőkben. Ezúttal azonban a Modernizr-nal különböző módon próbálkozunk.
Hivatalos honlapján, "A Modernizr egy nyílt forráskódú JavaScript könyvtár, amely segít létrehozni a következő generációját HTML5 és CSS3-hajtott webhelyek". Technikailag a Modernizr teszteli a böngésző támogatását bizonyos új elemek és funkciók számára. Ha a támogatás nincs megadva, akkor a visszavonásnak meg kell adnia, hogy a különböző stílusok vagy szolgáltatások nyújtása polyfills. Ebben az esetben a Modernizr-t használjuk, hogy segítsen tesztelni a részleteket és az összefoglaló elemet.
Menjen a Modernizr-be, és lépjen a letöltési oldalra.
A letöltési oldalon a Modernizr néhány lehetőséget kínál a könyvtár konfigurálására, így csak bizonyos funkciókat kell kiválasztania, amelyekre szüksége van a webhelyére. Ebben az esetben:
HTML5Shiv 3.4
CSS osztályok hozzáadása, ez a funkció automatikusan beilleszti az osztályokat a html címkébe.
a Modernizr.load,
menjen a közösségi bővítmények mezőbe, és válassza a lehetőséget elem-részletek,
Az Extensibility részben válassza a lehetőséget Modernizr.addTest.
A fájl létrehozása és letöltése.
Csatlakoztassa a html-hez, és töltse be újra az oldalt az Internet Explorer programban. Az oldalt most úgy kellett volna kialakítani, hogy az Internet Explorer most felismeri a címkéket.
És ha megtekinti a forrást, vagy megvizsgálja az elemet, akkor a html tagba beillesztette a nem-részlet osztályt; jelzi, hogy a böngésző, ahol az oldalt előnézzük; jelenleg nem támogatja a részleteket. @@@@ [Nem értem ezt a mondatot. ]
Ezután létrehozhatunk egy lemaradást, ha ezt az osztályt használjuk a horogként, amit a következő lépésben fogunk tenni.
A visszaesés
Ebben a lépésben hasonlót biztosítunk részletek más böngészők (kivéve a Chrome-ot) elem-funkcionalitását. Az előző bejegyzésben ezt a lépést automatikusan elvégeztük ezzel a szkriptrel, de ezúttal egyedül fogjuk létrehozni.
Jegyzet: Csak egy kicsit átnézzük az előző hozzászólásunkból; a részletek elem jelenleg csak a Chrome böngészőben támogatott.
Először kezdjük a CSS-t.
Az összefoglaló címkén a kurzor módot mutatóvá változtatjuk, így a felhasználó rájön, hogy kattintható.
Ahhoz, hogy több részletet adjon a részletelem elemének felső és alsó részén margóval.
részletek margin: 20px 0px;
Alapértelmezés szerint az összefoglaló címke nyíl lesz. De itt plusz-mínusz ikonnal szeretnénk helyettesíteni.
Jegyzet: Mielőtt továbblépnék, korábban már letöltöttem az ebből a gyűjteményből az ikonokat a Fugue által, letöltöttem és egy fájlba dobtam őket.
Adjunk hozzá egy pszeudo elemet, és háttérként csatoljuk az ikont. Figyeljük meg, hogy ezen a ponton a háttérpozíció a tetején van, amely a plusz ikont mutatja.
részletek> összefoglaló: előtt szélesség: 16px; magasság: 16x; kijelző: inline-block; tartalom: "! fontos; háttér: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') nincs ismétlődő középső teteje, margó-jobb: 5px; pozíció: relatív; top: 2px;
Ezután, amikor a részletek elem nyitva van, a háttérpozíció alulra kerül, amely a mínusz ikont mutatja.
részletek [nyitott]> összefoglaló: előtte, részletek.open> összefoglaló: előtt háttér: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png' ) nem ismétlődő középső alsó;
A [nyisd ki] jel egy választó. Ebben az esetben a támogató böngészőben kiválasztja a nyitott attribútum részleteit.
Végül el kell rejtenünk azt a nyilat, amely alapértelmezés szerint megjelenik a Chrome-ban.
Az alapértelmezett nyíl most már helyettünk ikonunkkal, és ha azt a Chrome-ban látja, akkor már van egy váltóhatása, amikor rákattint; az ikon ennek megfelelően változik. De más böngészőkben semmi sem fog megtörténni. Tehát a következő lépésben megpróbáljuk megismételni a hatást a jQuery-vel.
A jQuery-vel való váltás
Mielőtt elkezdenénk a jQuery részből, szeretnék köszönetet mondani Ian Devlinnek az inspirációért, az alábbi szkript valójában enyhe módosítása.
Rendben, hozzunk létre változót az összefoglaló címke tárolásához.
var summary = $ ('részletek összefoglalása');
Ezután az összefoglaló összes testvérelemét a div.
summary.siblings (). wrapAll (”„);
És elrejteni azt a divot, amikor a részletelemnek nincs nyitott osztálya.
$ ('részletek: nem (.open) összefoglaló).) testvérek (' div '). hide ();
Amikor az összefoglalót rákattintjuk, azt szeretnénk, ha a rejtett div látható, és az ellenkezője, amikor a div kezdetben nyitva van, akkor elrejtve lett volna..
Annak érdekében, hogy ezek a funkciók csak a nem támogatott böngészőkben kerüljenek végrehajtásra, ezeket a feltételes nyilatkozatot belehelyezzük.
ha ($ ('html'). hasClass ('no-details')) // a kód itt megy
Az alábbiakban a kódunk van:
if ($ ('html'). hasClass ('no-details')) var summary = $ ('részletek összefoglalása'); summary.siblings (). wrapAll (”„); $ ('részletek: nem (.open) összefoglaló).) testvérek (' div '). hide (); summary.click (funkció () $ (this) .siblings ('div'). toggle (); $ ('részletek') toggleClass ('open'););
Most teszteljük a böngészőben; a váltóhatásnak most már minden böngészőben kellett volna dolgoznia, személyesen ellenőriztem (amíg az Internet Explorer 7).
Demó
Letöltés forrása
tippek: Alternatívaként módosíthatja a .kapcsoló () val vel .slideToggle () Diahatás létrehozásához. Ha azt szeretné, hogy a részleteket kezdetben megnyissuk, akkor hozzáadhat egy osztályt a részletek elemben.
Következtetés
A HTML5 használatával végigvizsgáltuk az egyetlen termékoldal létrehozását, a nem támogatott böngészők hibakeresését, valamint a sajátos elemelemek váltási hatását, így remélhetőleg sokat tanulhatsz belőle.
Azonban tudom, hogy ebben a bejegyzésben nem részleteztem mindent részletesen, így ha valamit törölni szeretne, nyugodtan küldje el a kérdést az alábbi megjegyzések mezőbe.