Začnimo.

Oznaka HTML5

Najprej moramo ustvariti html dokument z naslednjo oznako:

 
 
 
 
Apple iPhone 4 - 16GB
 
Najbolj neverjeten iPhone še ni.
 
 
 
  
 
 
Hitrejši dvojedrni A5 čip. 8MP kamera z novo optiko prav tako posname 1080p HD video. In uvedbo Siri. To je najbolj neverjeten iPhone še.
 
 
Lastnosti izdelka
 
 
8 mega pixel fotoaparat s polnim 1080p video snemanjem
 
Siri glasna pomočnica
 
iCloud
 
Air Print
 
Prikaz mrežnice
 
Geografsko označevanje fotografij in videoposnetkov
 
 
 Kupi zdaj 
 
 

Uporabljamo več novih oznak iz specifikacij HTML5, kot je glavo, hgroup, številka, oddelek, in tisti, o katerem smo prej razpravljali; podrobnosti in povzetek oznaka.

Vendar pa ne bomo kopali v te oznake, ne zato, ker nismo pripravljeni, temveč so to osnovne teme, ki jih lahko najdete drugje. Torej, če ste resnično novi v HTML5, vam priporočam, da preberete naslednje reference teh oznak; razložili so jih celovito:

• Govorimo o semantiki
• Element glave HTML5
• Element skupine
• Referenca oznak HTML5

Zdaj pa si oglejmo naš prvi nastop.

No, izgleda smiselno brez slogov. Na samem vrhu je glava, nato pa sledi razdelek za sliko, opis in na koncu gumb "Kupi zdaj". Zdaj pa si oglejmo to stran.

Slogi

Začeli bomo z normalizacijo vseh privzetih stilov s tem slogovnim slogom in dodali gradientno ozadje html oznaka.

 html višina: 100%; ozadje: # f3f3f3; ozadje: -moz-linear-gradient (vrh, # f3f3f3 0%, #ffffff 50%); ozadje: -webkit-gradient (linearno, levo zgoraj, levo spodaj, barvno stop (0%, # f3f3f3), barvno zaustavitev (50%, # ffffff)); ozadje: -webkit-linear-gradient (zgoraj, # f3f3f3 0%, # ffffff 50%); ozadje: -o-linearni gradient (zgoraj, # f3f3f3 0%, # ffffff 50%); ozadje: -ms-linearni gradient (zgoraj, # f3f3f3 0%, # ffffff 50%); ozadje: linearno gradient (top, # f3f3f3 0%, # ffffff 50%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3", endColorstr = "# ffffff", GradientType = 0); 

Ne pozabite, da so naši elementi izdelka vsi zaviti v div z razredom izdelkov. Torej, tukaj bi želeli centrirati ovoj in nastaviti širino 650px.

 .ovoj širina: 650px; margin: auto; oblazinjenje: 25px 0px; 

Razdelek glave

V razdelku z glavo imamo dva naslova h1 in h4, zato naj stiliziramo te elemente.

 h1, h4 družina pisav: Helvetica Neue, Arial, sans-serif; font-weight: normalna; margin: 0;  h1 velikost pisave: 24pt;  h4 velikost pisave: 16pt; barva: #aaa; 

In potem dodajte malo prostora na dnu glavo z maržo.

 glava margin-bottom: 20px; 

Če pogledate na desno stran glave, bi bilo na tej strani veliko presledkov.

Torej, zakaj ne bi postavili tudi Appleovega logotipa.

 glava margin-bottom: 20px; ozadje: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png') desno središče brez ponovitve; 

Slika izdelka

Nato pomaknite sliko v levo in nastavite največjo širino slike na 350px.

 figura plovec: levo;  slika img max-width: 350px; 

Ker je bila slika potisnjena v levo, bomo razdelek opisa postavili v desno in nastavili širino na 300 px.

 odsek družina pisav: Tahoma, Arial, sans-serif; višina linije: 150%; float: desno; širina: 300px; barva: # 333; 

Zdaj pa poglejmo rezultat.

Začne dobro izgledati, vendar oznaka podrobnosti še vedno ne deluje (razen v Chromu), zato naredimo naslednji gumb.

Gumb

Za sloge gumbov bomo posnemali tisto iz Apple.com Store. In tukaj je vsa skladnja, ki jo morate vnesti v vašo slogovno tabelo za gumb.

 gumb ozadje: # 36a9ea; ozadje: -moz-linearno-gradient (top, # 36a9ea 0%, # 127fd2 100%); ozadje: -webkit-gradient (linearno, levo zgoraj, levo spodaj, barvno stop (0%, # 36a9ea), barvno zaustavitev (100%, # 127fd2)); ozadje: -webkit-linear-gradient (vrh, # 36a9ea 0%, # 127fd2 100%); ozadje: -o-linearni gradient (vrh, # 36a9ea 0%, # 127fd2 100%); ozadje: -ms-linearni gradient (vrh, # 36a9ea 0%, # 127fd2 100%); ozadje: linearni gradient (top, # 36a9ea 0%, # 127fd2 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 36a9ea", endColorstr = "# 127fd2", GradientType = 0); meja: 1px trdna # 00599d; barva: #fff; oblazinjenje: 8px 20px; -webkit-border-radius: 3px; obrobni polmer: 3px; -webkit-box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), vložek 0px 1px 0px 0px rgba (250, 250, 250, .3); box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), vložek 0px 1px 0px 0px rgba (250, 250, 250, .3); text-shadow: 0px 1px 1px # 156cc4; filter: dropshadow (barva = # 156cc4, offx = 0, offy = 1); velikost pisave: 10pt;  gumb: hover ozadje: # 2f90d5; ozadje: -moz-linear-gradient (vrh, # 2f90d5 0%, # 0351b7 100%); ozadje: -webkit-gradient (linearno, levo zgoraj, levo spodaj, barvno stop (0%, # 2f90d5), barvno zaustavitev (100%, # 0351b7)); ozadje: -webkit-linear-gradient (vrh, # 2f90d5 0%, # 0351b7 100%); ozadje: -o-linearni gradient (vrh, # 2f90d5 0%, # 0351b7 100%); ozadje: -ms-linearni gradient (zgoraj, # 2f90d5 0%, # 0351b7 100%); ozadje: linearni gradient (zgoraj, # 2f90d5 0%, # 0351b7 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 2f90d5", endColorstr = "# 0351b7", GradientType = 0);  gumb: aktivno ozadje: # 127fd2; -webkit-box-shadow: vložek 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); box-shadow: vložek 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); 

Sedaj naj bi gumb izgledal bolje.

Težava v Internet Explorerju

Kot ponavadi IE (Internet Explorer) vedno povzroča nekaj težav; če jo odprete v kateremkoli IE, nižjem od 9, bo stran ostala nespremenjena.

To je zato, ker Internet Explorer ne prepozna novih elementov (oddelek, glavo, itd.), tako da se bodo uporabljali slogi, ki smo jih določili. Tako bomo v naslednjem koraku delali na reševanju tega problema.

Testiranje podpore za brskalnik

V naši prejšnji objavi smo obravnavali podporo brskalnika za elemente podrobnosti s tem polifilom; tako, da lahko deluje v nepodprtih brskalnikih. Vendar pa bomo tokrat poskusili z različnimi načini, da to storimo s Modernizr.

Na uradni spletni strani, "Modernizr je odprta koda JavaScript knjižnice, ki vam pomaga zgraditi naslednjo generacijo HTML5 in CSS3-spletne strani z napajanjem". Tehnično bo Modernizr testiral podporo za nekatere nove elemente in funkcije. Če podpora ni zagotovljena, moramo zagotoviti nadomestno možnost, če podajamo različne sloge ali zagotavljamo poli. V tem primeru bomo uporabili Modernizr, ki nam bo pomagal testirati podrobnosti in element povzetka.

1. Pojdite v Modernizr in nadaljujte s stranjo za prenos.

2. Na strani za prenos Modernizr ponuja nekaj možnosti za konfiguriranje knjižnice, tako da boste morali izbrati le nekatere funkcije, ki jih resnično potrebujete za vaše spletno mesto. V tem primeru potrebujemo:

   • HTML5Shiv 3.4
   • Dodaj razrede CSS, ta funkcija bo samodejno vstavila razrede v oznako html.
   • Modernizr.load,
   • pojdite v polje za dodatke skupnosti in izberite elem-podrobnosti,
   • V razdelku Razširljivost izberite Modernizr.addTest.
3. Ustvarite in prenesite datoteko.
4. Povežite ga s svojim html in znova naložite stran v Internet Explorerju. Stran bi morala biti zdaj oblikovana, ker lahko Internet Explorer zdaj prepozna oznake.

Če pogledate izvorni ali pregledni element, boste ugotovili, da je v oznako html vstavljen razred brez podrobnosti; označuje, da brskalnik, v katerem predogledamo stran; trenutno ne podpira elementa podrobnosti. @@@@ [Tega stavka ne razumem. ]

Nato lahko ustvarimo nadomestno uporabo tega razreda kot kljuke, kar bomo naredili v naslednjem koraku.

Pomočnik

V tem koraku bomo zagotovili podobno podrobnosti funkcionalnost elementov za druge brskalnike (razen Chroma). V prejšnji objavi je bil ta korak samodejno izveden s tem skriptom, vendar ga bomo tokrat ustvarili sami.

Opomba: Samo pregledujem malo iz naše prejšnje delovno mesto; element podrobnosti je trenutno podprt samo v brskalniku Chrome.

Zato najprej začnemo delati na CSS.

Na oznaki povzetka spremenite način kazalca na kazalec, tako da bo uporabnik opazil, da je mogoče klikniti.

 summary kazalec: kazalec; velikost pisave: 12pt; oris: 0; 

Na vrhu in na dnu elementa podrobnosti z robom podajte več presledkov.

 podrobnosti margin: 20px 0px; 

Oznaka povzetka ima privzeto puščico. Ampak tukaj bi jo radi zamenjali z ikono plus-minus.

Opomba: Preden sem nadaljeval, sem ikone iz te zbirke prenesel Fugue, jih prenesel in sprite v eno datoteko.

Dodamo pred psevdoelementom in dodamo ikono kot ozadje. Upoštevajte, da je na tem mestu položaj ozadja na vrhu, ki bo prikazal ikono plus.

 podrobnosti> povzetek: pred širina: 16px; višina: 16px; prikaz: inline-block; vsebina: "! important; ozadje: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') središče ne ponovi, desno: Pozicija: relativna, vrh: 2px;

Potem, ko je element podrobnosti odprt, se položaj ozadja premakne na dno, ki bo prikazalo ikono minus.

 podrobnosti [odprto]> povzetek: pred, details.open> povzetek: pred background: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png' ) sredinsko dno brez ponovitve; 

The [odprto] znak je izbirnik. V tem primeru bo v podpornem brskalniku izbral atribut odprtosti podrobnosti.

Nazadnje moramo skriti puščico, ki je privzeto prikazana v Chromu.

 podrobnosti> povzetek :: - webkit-details-marker display: none; 

Nato nekaj časa vidimo rezultat v brskalniku.

Privzeta puščica je bila nadomeščena z našo ikono, če pa jo vidite v Chromu, boste imeli že preklopni učinek, ko kliknete nanj; ikona se bo ustrezno spremenila. Toda v drugih brskalnikih se nič ne bo zgodilo. Torej bomo v naslednjem koraku poskušali posnemati učinek z jQuery.

Preklopni učinek z jQuery

Preden začnemo z delom jQuery, se želim zahvaliti Ianu Devlinu za navdih, scenarij spodaj je dejansko majhna sprememba njegovega dela..

V redu, ustvarimo spremenljivko za shranjevanje zbirne oznake.

 var summary = $ ("povzetek podrobnosti"); 

Nato vse elemente sestave povzetka povzamemo z a div.

summary.siblings (). wrapAll ('
');

In skrijte ta div, ko element podrobnosti nima odprtega razreda.

$ ('podrobnosti: ne (.open) povzetek'). siblings ('div'). hide ();

Ko kliknemo povzetek, želimo, da se prikaže skriti div, in nasprotno, ko je div najprej odprt, bi bilo skrito..

 summary.click (function () $ (this) .siblings ('div'). toggle (); $ ('details'). toggleClass ('open');); 

Da bi zagotovili, da se bodo te funkcije izvajale samo v nepodprtih brskalnikih, jih bomo ovili znotraj tega pogojnega stavka.

 if ($ ('html'). hasclass ('no-details')) // kodo gre tukaj

Spodaj je koda, ki jo imamo:

 if ($ ('html')) hasClass ('no-details')) var summary = $ ('povzetek podrobnosti'); summary.siblings (). wrapAll ('
'); $ ('podrobnosti: ne (.open) povzetek'). siblings ('div'). hide (); summary.click (function () $ (this) .siblings ('div'). toggle (); $ ('details'). toggleClass ('open');); 

Zdaj pa ga preizkusimo v brskalniku; preklopni učinek bi moral zdaj delati na vseh brskalnikih, osebno sem preveril (dokler Internet Explorer 7).

• Demo
• Prenesi vir

Nasveti: Lahko pa tudi spremenite .preklop () z .slideToggle () ustvariti učinek diapozitiva. Tudi če želite najprej odpreti podrobnost, lahko dodate element, ki je odprt v elementu podrobnosti.

Zaključek

Preverili smo vse korake ustvarjanja ene strani izdelka z uporabo HTML5, odpravili napake za nepodprte brskalnike in posnemali učinek preklopa za element podrobnosti, zato upajmo, da se boste iz tega veliko naučili..

Vendar se zavedam, da v tej objavi nisem podrobno razložil vsega, zato če želite nekaj pojasniti, ga lahko objavite v polju za komentarje spodaj..