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
 
 
 Vásárolj most 
 
 

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.

 html magasság: 100%; háttér: # f3f3f3; háttér: -moz-lineáris gradiens (felső, # f3f3f3 0%, #ffffff 50%); háttér: -webkit-gradiens (lineáris, bal felső, bal alsó, szín-stop (0%, # f3f3f3), szín-stop (50%, # ffffff)); háttér: -webkit-lineáris gradiens (felső, # f3f3f3 0%, # ffffff 50%); háttér: -o-lineáris gradiens (felső, # f3f3f3 0%, # ffffff 50%); háttér: -ms-lineáris gradiens (felső, # f3f3f3 0%, # ffffff 50%); háttér: lineáris gradiens (felső, # f3f3f3 0%, # ffffff 50%); szűrő: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3", endColorstr = "# ffffff", GradientType = 0); 

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.

 h1, h4 font-család: Helvetica Neue, Arial, sans-serif; font-súly: normál; margin: 0;  h1 font-size: 24pt;  h4 betűméret: 16pt; szín: #aaa; 

Ezután adjunk hozzá egy kis helyet a fejléc tartalékkal.

 fejléc margin-bottom: 20px; 

Ha megnézzük a fejléc jobb oldalát, akkor sok hely lenne az oldalon.

Akkor miért nem helyezzük el az Apple logót is.

 fejléc margin-bottom: 20px; háttér: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png') nem ismételhető jobb központ; 

A termék képe

Ezután lebegjen a kép balra, és állítsa be a kép maximális szélességét 350px.

 ábra float: balra;  img max-width: 350px; 

Mivel a kép balra tolódott, akkor a leíró részt jobbra lebegtetjük, és a szélességet állítjuk be 300px.

 szekció font-family: Tahoma, Arial, sans-serif; vonalmagasság: 150%; úszó: jobb; szélesség: 300px; szín: # 333; 

Most nézzük meg az eredményt.

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.

 gomb háttér: # 36a9ea; háttér: -moz-lineáris gradiens (felső, # 36a9ea 0%, # 127fd2 100%); háttér: -webkit-gradiens (lineáris, bal felső, bal alsó, szín-stop (0%, # 36a9ea), szín-stop (100%, # 127fd2)); háttér: -webkit-lineáris gradiens (felső, # 36a9ea 0%, # 127fd2 100%); háttér: -o-lineáris gradiens (felső, # 36a9ea 0%, # 127fd2 100%); háttér: -ms-lineáris gradiens (felső, # 36a9ea 0%, # 127fd2 100%); háttér: lineáris gradiens (felső, # 36a9ea 0%, # 127fd2 100%); szűrő: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 36a9ea", endColorstr = "# 127fd2", GradientType = 0); határ: 1px szilárd # 00599d; szín: #fff; párnázás: 8px 20px; -webkit-border-radius: 3px; határ-sugár: 3px; -webkit-box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), 0px 1px 0px 0px rgba (250, 250, 250, 3); box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), 0px 1px 0px 0px rgba (250, 250, 250, 3); szöveg-árnyék: 0px 1px 1px # 156cc4; szűrő: dropshadow (szín = # 156cc4, offx = 0, offy = 1); betűméret: 10pt;  gomb: lebeg háttér: # 2f90d5; háttér: -moz-lineáris gradiens (felső, # 2f90d5 0%, # 0351b7 100%); háttér: -webkit-gradiens (lineáris, bal felső, bal alsó, szín-stop (0%, # 2f90d5), szín-stop (100%, # 0351b7)); háttér: -webkit-lineáris gradiens (felső, # 2f90d5 0%, # 0351b7 100%); háttér: -o-lineáris gradiens (felső, # 2f90d5 0%, # 0351b7 100%); háttér: -ms-lineáris gradiens (felső, # 2f90d5 0%, # 0351b7 100%); háttér: lineáris gradiens (felső, # 2f90d5 0%, # 0351b7 100%); szűrő: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 2f90d5", endColorstr = "# 0351b7", GradientType = 0);  gomb: aktív háttér: # 127fd2; -webkit-box-shadow: 0px 2px 1px 0px rgba (0, 47, 117, 5), 0px 1px 1px 0px rgba (0, 0, 0, 0); doboz-árnyék: 0px 2px 1px 0px rgba (0, 47, 117, 5), 0px 1px 1px 0px rgba (0, 0, 0, 0); 

Most a gombnak jobbnak kell lennie.

Probléma az Internet Explorerben

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.

1. Menjen a Modernizr-be, és lépjen a letöltési oldalra.

2. 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.
3. A fájl létrehozása és letöltése.
4. 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ó.

 összegzés kurzor: mutató; betűméret: 12pt; vázlat: 0; 

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.

 részletek> összefoglalás :: - webkit-részletek-marker display: none; 

Ezután nézzük meg az eredményt egy böngészőben.

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

 summary.click (funkció () $ (this) .siblings ('div'). toggle (); $ ('részletek') toggleClass ('open');); 

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.