Să începem.

Marcajul HTML5

În primul rând, trebuie să creăm un html document cu următorul marcaj:

 
 
 
 
Apple iPhone 4 - 16 GB
 
Cel mai uimitor iPhone încă.
 
 
 
  
 
 
Cipul mai rapid cu două nuclee A5. Camera foto de 8MP cu optica complet nouă trage, de asemenea, 1080p video HD. Si introducand Siri. Este cel mai uimitor iPhone încă.
 
 
caracteristicile produsului
 
 
Cameră de 8 mega pixeli cu înregistrare video completă de 1080p
 
Siri asistent de voce
 
icloud
 
Printul aerian
 
Retina Display
 
Fotografie geografică și video
 
 
 Cumpară acum 
 
 

Utilizăm câteva etichete noi din specificațiile HTML5, cum ar fi antet, hgroup, figura, secțiune, și una pe care am discutat-o ​​înainte; Detalii și rezumat etichetă.

Cu toate acestea, nu vom face parte din aceste etichete, nu pentru că nu suntem dispuși, ci mai degrabă acestea sunt subiecte de bază pe care le puteți găsi ușor în altă parte. Deci, dacă sunteți cu adevărat nou în HTML5, aș recomanda să citiți următoarele referințe ale acelor tag-uri; le-au explicat pe deplin:

• Să vorbim despre Semantic
• Elementul Header HTML5
• Elementul hgroup
• Referința etichetelor HTML5

Acum, să vedem prima apariție a paginii noastre.

Ei bine, se pare sensibil, fără stiluri. În partea de sus se află antetul, apoi vine secțiunea pentru imagine, descriere și, în sfârșit, butonul "Cumpărați acum". Acum, să perkim această pagină.

Stilurile

Vom începe prin a normaliza toate stilurile implicite utilizând această foaie de stil și adăugăm un background de gradient la html etichetă.

 html înălțime: 100%; fundal: # f3f3f3; fundal: -moz-linear-gradient (top, # f3f3f3 0%, #ffffff 50%); fundal: -webkit-gradient (liniuță, stânga sus, fund stânga, stop color (0%, # f3f3f3), oprire color (50%, # ffffff)); fundal: -webkit-gradient linear (top, # f3f3f3 0%, # ffffff 50%); fundal: -o-gradient linear (top, # f3f3f3 0%, # ffffff 50%); fundal: -ms-gradient linear (top, # f3f3f3 0%, # ffffff 50%); fundal: gradient liniar (top, # f3f3f3 0%, # ffffff 50%); filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3", endColorstr = "# ffffff", GradientType = 0); 

Amintiți-vă că elementele noastre de produs sunt toate înfășurate într-un div cu clasa de produse. Deci, aici am dori să centrați ambalajul și să setați lățimea să fie aproximativ 650 de pixeli.

 .înveliș lățime: 650px; marja: auto; padding: 25px 0px; 

Secțiunea antet

În secțiunea antet avem două titluri h1 și h4, așadar, să stilim aceste elemente.

 h1, h4 font-familie: Helvetica Neue, Arial, sans-serif; font-weight: normal; marja: 0;  h1 font-size: 24pt;  h4 font-size: 16pt; culoare: #aaa; 

Și apoi adăugați un spațiu mic în partea de jos a antet cu o marjă.

 antetul margin-bottom: 20px; 

Dacă te uiți în partea dreaptă a antetului, ar fi mult spațiu lateral în acea parte.

Deci, de ce nu punem logo-ul Apple acolo.

 antetul margin-bottom: 20px; fundal: url ('... /https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png') nu-repeta dreapta centru; 

Imaginea produsului

Apoi, plutiți imaginea spre stânga și setați lățimea maximă a imaginii la 350px.

 figura float: left;  figura img max-width: 350px; 

Din moment ce imaginea a fost împinsă spre stânga, vom flota secțiunea de descriere spre dreapta și vom seta lățimea la 300px.

 secțiunea font-family: Tahoma, Arial, sans-serif; înălțimea liniei: 150%; float: dreapta; lățime: 300px; culoare: # 333; 

Acum, să vedem rezultatul până acum.

Începe să arate bine, dar eticheta detaliilor încă nu funcționează (cu excepția Chrome), așa că să stilăm următorul buton.

Butonul

Pentru stilurile de butoane, vom imita pe cele de la magazinul Apple.com. Și aici este toată sintaxa pe care trebuie să o puneți în foaia de stil pentru buton.

 butonul background: # 36a9ea; fundal: -moz-linear-gradient (top, # 36a9ea 0%, # 127fd2 100%); fundal: -webkit-gradient (liniuță, stânga sus, fund stânga, oprire de culoare (0%, # 36a9ea), oprire color (100%, # 127fd2)); fundal: -webkit-gradient linear (top, # 36a9ea 0%, # 127fd2 100%); fundal: -o-gradient linear (top, # 36a9ea 0%, # 127fd2 100%); fundal: -ms-linear-gradient (sus, # 36a9ea 0%, # 127fd2 100%); fundal: gradient linear (top, # 36a9ea 0%, # 127fd2 100%); filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 36a9ea", endColorstr = "# 127fd2", GradientType = 0); frontieră: 1px solid # 00599d; culoare: #fff; padding: 8px 20px; -webkit-border-radius: 3px; raza de graniță: 3px; -webkit-box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), inset 0px 1px 0px 0px rgba (250, 250, 250, .3); box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), inset 0px 1px 0px 0px rgba (250, 250, 250, .3); text-shadow: 0px 1px 1px # 156cc4; filtru: dropshadow (culoare = # 156cc4, offx = 0, offy = 1); font-size: 10pt;  buton: hover background: # 2f90d5; fundal: -moz-linear-gradient (top, # 2f90d5 0%, # 0351b7 100%); fundal: -webkit-gradient (liniar, stânga sus, fund stânga, oprire color (0%, # 2f90d5), stop color (100%, # 0351b7)); fundal: -webkit-gradient linear (top, # 2f90d5 0%, # 0351b7 100%); fundal: -o-gradient linear (top, # 2f90d5 0%, # 0351b7 100%); fundal: -ms-linear-gradient (top, # 2f90d5 0%, # 0351b7 100%); fundal: gradient liniar (top, # 2f90d5 0%, # 0351b7 100%); filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 2f90d5", endColorstr = "# 0351b7", GradientType = 0);  buton: activ background: # 127fd2; -webkit-box-shadow: inset 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); box-shadow: inset 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); 

Acum butonul ar trebui să arate mai bine.

Problemă în Internet Explorer

Ca de obicei IE (Internet Explorer) cauzează întotdeauna unele probleme; dacă deschideți acest lucru în orice IE mai mică de 9, pagina va rămâne fără stil.

Acest lucru se datorează faptului că Internet Explorer nu recunoaște elementele noi (secțiune, antet, etc), astfel încât stilurile pe care le-am specificat incorect să se aplice. Astfel, în următorul pas vom lucra la rezolvarea acestei probleme.

Testarea suportului pentru browser

În postarea noastră anterioară, am abordat suportul browserului pentru elementul de detaliu utilizând acest polifil; astfel încât să funcționeze în browserele nesuportate. Cu toate acestea, de data aceasta vom încerca diferite moduri de a face acest lucru cu Modernizr.

De pe site-ul său oficial, "Modernizr este o bibliotecă JavaScript open-source care vă ajută să construiți următoarea generație de HTML5 și CSS3-site-uri web". Din punct de vedere tehnic, Modernizr va testa suportul browserului pentru anumite elemente și caracteristici noi. Dacă sprijinul nu este furnizat, atunci trebuie să oferim o rezervă, fie că este vorba de acordarea de stiluri diferite sau de furnizare polyfills. În acest caz, vom folosi Modernizr pentru a ne ajuta să testați detaliile și elementul sumar.

1. Du-te la Modernizr și continuați cu pagina de descărcare.

2. În pagina de descărcare, Modernizr oferă câteva opțiuni pentru configurarea bibliotecii, astfel încât trebuie doar să selectați anumite funcții de care aveți nevoie pentru site-ul dvs. web. În acest caz, avem nevoie de:

   • HTML5Shiv 3.4
   • Adăugați clase CSS, această caracteristică va introduce automat clase în eticheta html.
   • Modernizr.load,
   • accesați caseta de completare a comunității și selectați Detalii-ELEM,
   • În secțiunea Extensibilitate, selectați Modernizr.addTest.
3. Generați și descărcați fișierul.
4. Conectați-l la html și reîncărcați pagina în Internet Explorer. Pagina ar fi trebuit acum să fie desenată, deoarece Internet Explorer poate recunoaște etichetele acum.

Și dacă vizualizați sursa sau inspectați elementul, veți găsi că clasa no-details a fost introdusă în eticheta html; indicând faptul că browserul în care previzualizăm pagina; nu acceptă în prezent elemente de detaliu. @@@@ [Nu înțeleg această teză. ]

Apoi, putem crea o rezervă folosind această clasă ca un cârlig, pe care o vom face în pasul următor.

Fallbackul

În acest pas vom oferi similar Detalii funcționalitate element pentru alte browsere (cu excepția Chrome). În postul anterior, acest pas a fost făcut automat folosind acest script, dar de data aceasta îl vom crea pe cont propriu.

Notă: Doar revizuirea un pic de la postul nostru anterior; elementul de detalii este în prezent acceptat numai în browserul Chrome.

Deci, să începem să lucrăm mai întâi la CSS.

În eticheta rezumat, schimbăm modul cursor la pointer, astfel că utilizatorul va observa că este clicabil.

 rezumat cursor: pointer; font-size: 12pt; contur: 0; 

Pentru a da mai multe spații la partea superioară și inferioară a elementului de detaliu cu o marjă.

 detalii margin: 20px 0px; 

În mod prestabilit, eticheta sumară va avea o săgeată. Dar aici am dori să o înlocuim cu o pictogramă plus-minus.

Notă: Înainte de a continua, am descărcat anterior pictogramele din această colecție de către Fugue, le descarc și le sprite într-un singur fișier.

Să adăugăm un pseudo-element înainte și să atașăm pictograma ca fundal. Rețineți că în acest moment poziția de fundal este în partea de sus care va afișa pictograma plus.

 detalii> rezumat: înainte de width: 16px; înălțime: 16px; afișare: inline-block; conținut: "! important; fundal: url ('... /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') nu-repeta centru de top; margin-dreapta: 5px; poziție: relativă; partea de sus: 2px;

Apoi, când elementul de detalii este deschis, poziția de fundal se va muta în partea inferioară care va afișa pictograma minus.

 detalii [deschide]> rezumat: înainte, detalii.open> rezumat: înainte de background: url ('... /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png' ) fundul centrului nu se repetă; 

[deschis] semnul este un selector. În acest caz, acesta va selecta atributul open details în browserul de suport.

În cele din urmă, ar trebui să ascundem săgeata care este afișată în mod implicit în Chrome.

 detalii> rezumat :: - webkit-details-marker display: none; 

Apoi, să vedem rezultatul într-un browser pentru un timp.

Săgeata implicită a fost înlocuită cu pictograma noastră și, dacă o vedeți în Chrome, veți avea deja un efect de comutare când faceți clic pe el; pictograma se va schimba în consecință. Dar, în alte browsere nimic nu se va întâmpla în continuare. Deci, în următorul pas vom încerca să replicăm efectul cu jQuery.

Efectul de comutare cu jQuery

Înainte de a începe cu partea jQuery, aș dori să-i mulțumesc lui Ian Devlin pentru inspirație, scenariul de mai jos este de fapt o ușoară modificare a lui.

Bine, să creăm o variabilă pentru a stoca eticheta rezumat.

 var summary = $ ('rezumatul detaliilor'); 

Apoi înfășurăm toate elementele frățești ale rezumatului cu div.

summary.siblings (). wrapAll (“
„);

Și ascundeți div atunci când elementul de detalii nu are clasa deschisă.

$ ('detalii: nu (.open) rezumat') siblings ('div') hide ();

Atunci când se face clic pe rezumat, vrem ca div divizată să fie afișată, iar opusul, atunci când div este inițial deschis, ar fi ascuns.

 sum.click (functie () $ (aceasta) .siblings ('div') toggle (); $ ('detalii') toggleClass ('open'); 

Pentru a vă asigura că aceste funcții vor fi executate numai în browserele neacceptate, le vom înfășura în această declarație condiționată.

 dacă $ ('html') hasClass ('no-details')) // codul merge aici

Și mai jos este codul pe care îl avem:

 dacă $ ('html'). hasClass ('no-details')) var summary = $ ('rezumatul detaliilor'); summary.siblings (). wrapAll (“
„); $ ('detalii: nu (.open) rezumat') siblings ('div') hide (); sum.click (functie () $ (aceasta) .siblings ('div') toggle (); $ ('detalii') toggleClass ('open'); 

Acum, să o testați în browser; efectul de comutare ar trebui să funcționeze acum pe toate browserele, am verificat personal (până la Internet Explorer 7).

• Demo
• Descărcați sursa

Sfaturi: Alternativ, puteți să schimbați .comutare() cu .slideToggle () pentru a crea un efect de diapozitive. De asemenea, dacă doriți ca detaliile să fie deschise inițial, puteți adăuga o clasă deschisă în elementul de detalii.

Concluzie

Am parcurs toți pașii de creare a unei singure pagini de produs utilizând HTML5, depanarea pentru browserele nesuportate, precum și replicarea efectului de comutare pentru elementul de detaliu pe cont propriu, deci sperăm că puteți învăța multe din el.

Cu toate acestea, știu că nu am explicat toate detaliile în acest post, deci dacă doriți să clarificați ceva, nu ezitați să postați întrebarea în caseta de comentarii de mai jos.