Započnimo.

Oznaka HTML5

Prvo, moramo stvoriti hTML dokument sa sljedećom oznakom:

 
 
 
 
Apple iPhone 4 - 16GB
 
Najzanimljiviji iPhone još.
 
 
 
  
 
 
Brži dual-core A5 čip. 8MP kamera s potpuno novom optikom također snima 1080p HD video. I upoznavanje sa Siri. To je još nevjerojatan iPhone.
 
 
Značajke proizvoda
 
 
8 mega piksela kamera s punim 1080p video snimanje
 
Siri glas asistent
 
iCloud
 
Air Print
 
Prikaz mrežnice
 
Geooznačavanje fotografija i videozapisa
 
 
 Kupi sada 
 
 

Koristimo nekoliko novih oznaka iz specifikacija HTML5 Zaglavlje, hgroup, lik, odjeljak, i onaj o kojem smo već raspravljali; detalji i Sažetak označiti.

Međutim, nećemo se upuštati u ove oznake, ne zato što to nismo voljni, nego su to temeljne teme koje lako možete pronaći drugdje. Dakle, ako ste stvarno novi u HTML5, preporučio bih da pročitate sljedeće reference tih oznaka; oni su ih sveobuhvatno objasnili:

• Razgovarajmo o semantici
• Element zaglavlja HTML5
• Element grupe
• Referenca oznake HTML5

Sada ćemo vidjeti prvu pojavu naše stranice.

Pa, izgleda pametno bez ikakvih stilova. Na samom vrhu nalazi se zaglavlje, a zatim slijedi odjeljak za sliku, opis i na kraju gumb "Kupi odmah". Sada, razveselimo ovu stranicu.

Stilovi

Započet ćemo normaliziranjem svih zadanih stilova pomoću ove stilske tablice i dodati pozadinu gradijenta hTML označiti.

 html visina: 100%; pozadina: # f3f3f3; background: -moz-linearni gradijent (vrh, # f3f3f3 0%, #ffffff 50%); pozadina: -webkit-gradijent (linearni, lijevi vrh, lijevo dno, stop boja (0%, # f3f3f3), zaustavljanje boje (50%, # ffffff)); background: -webkit-linear-gradient (gore, # f3f3f3 0%, # ffffff 50%); pozadina: -o-linearnog gradijenta (gore, # f3f3f3 0%, # ffffff 50%); pozadina: -ms-linearni gradijent (gore, # f3f3f3 0%, # ffffff 50%); pozadina: linearni gradijent (gore, # f3f3f3 0%, # ffffff 50%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3", endColorstr = "# ffffff", GradientType = 0); 

Zapamtite da su svi naši elementi proizvoda zamotani unutar div s klasom proizvoda. Dakle, ovdje bismo htjeli srediti omot i postaviti širinu 650px.

 .omotač širina: 650px; margina: auto; obloga: 25px 0px; 

Odlomak zaglavlja

U zaglavlju imamo dva naslova h1 i H4, pa hajde da stiliziramo ove elemente.

 h1, h4 font-family: Helvetica Neue, Arial, sans-serif; težina fonta: normalna; margina: 0;  h1 font-size: 24pt;  h4 font-size: 16pt; boja: #aaa; 

I onda dodajte malo mjesta na dno Zaglavlje s marginom.

 zaglavlje margin-bottom: 20px; 

Ako pogledate na desnu stranu zaglavlja, na toj bi strani bilo puno razmaka.

Pa zašto ne bismo stavili i Apple logotip tamo.

 zaglavlje margin-bottom: 20px; pozadina: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png') desno središte koje se ne ponavlja; 

Slika proizvoda

Zatim pomaknite sliku ulijevo i postavite maksimalnu širinu slike na 350px.

 figura pluta: lijevo;  fig img max-width: 350px; 

Budući da je slika gurnuta ulijevo, tada ćemo prikazati odjeljak opisa udesno i postaviti širinu na 300px.

 section font-family: Tahoma, Arial, sans-serif; visina linije: 150%; float: desno; širina: 300px; boja: # 333; 

Sada ćemo vidjeti rezultat do sada.

Počinje izgledati dobro, ali oznaka detalja još uvijek ne radi (osim u Chromeu), pa usput ćemo oblikovati gumb.

Gumb

Za stilove tipki, oponašat ćemo one iz Apple.com trgovine. I ovdje je sva sintaksa koju trebate staviti u svoj stilski list za gumb.

 gumb pozadina: # 36a9ea; background: -moz-linearni gradijent (gore, # 36a9ea 0%, # 127fd2 100%); pozadina: -webkit-gradijent (linearni, lijevi vrh, lijevo dno, stop boja (0%, # 36a9ea), zaustavljanje boje (100%, # 127fd2)); pozadina: -webkit-linearnog gradijenta (gore, # 36a9ea 0%, # 127fd2 100%); pozadina: -o-linearni gradijent (gore, # 36a9ea 0%, # 127fd2 100%); pozadina: -ms-linearni gradijent (gore, # 36a9ea 0%, # 127fd2 100%); pozadina: linearni gradijent (gore, # 36a9ea 0%, # 127fd2 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 36a9ea", endColorstr = "# 127fd2", GradientType = 0); granica: 1px solid # 00599d; boja: #fff; obloga: 8px 20px; -webkit-border-radius: 3px; granični polumjer: 3px; -webkit-box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), umetak 0px 1px 0px 0px rgba (250, 250, 250, .3); kutija-sjena: 0px 1px 1px 0px rgba (0, 0, 0, .1), umetak 0px 1px 0px 0px rgba (250, 250, 250, .3); tekst-sjena: 0px 1px 1px # 156cc4; filter: dropshadow (boja = # 156cc4, offx = 0, offy = 1); veličina fonta: 10pt;  gumb: lebdi pozadina: # 2f90d5; background: -moz-linear-gradient (gore, # 2f90d5 0%, # 0351b7 100%); pozadina: -webkit-gradijent (linearni, lijevi vrh, lijevo dno, stop boja (0%, # 2f90d5), zaustavljanje boje (100%, # 0351b7)); pozadina: -webkit-linearno-gradijent (vrh, # 2f90d5 0%, # 0351b7 100%); pozadina: -o-linearnog gradijenta (gore, # 2f90d5 0%, # 0351b7 100%); pozadina: -ms-linearni gradijent (gore, # 2f90d5 0%, # 0351b7 100%); pozadina: linearni gradijent (gore, # 2f90d5 0%, # 0351b7 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 2f90d5", endColorstr = "# 0351b7", GradientType = 0);  gumb: aktivno pozadina: # 127fd2; -webkit-box-shadow: umetak 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); box-shadow: umetak 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); 

Sada bi gumb trebao izgledati bolje.

Problem s preglednikom Internet Explorer

Kao i obično IE (Internet Explorer) uvijek uzrokuje neke probleme; ako ga otvorite u bilo kojem IE-u nižem od 9, stranica će ostati ne-stilizirana.

To je zato što Internet Explorer ne prepoznaje nove elemente (odjeljak, Zaglavlje, itd.) tako da se primjenjuju stilovi koje smo naveli. Stoga ćemo u sljedećem koraku raditi na rješavanju ovog problema.

Testiranje podrške za preglednik

U našem prethodnom postu, bavili smo se podrškom preglednika za element detalja koristeći ovaj polyfill; tako da može raditi u nepodržanim preglednicima. Međutim, ovaj put ćemo pokušati s raznim načinima da to učinimo sa Modernizrom.

S njegove službene web stranice, "Modernizr je otvorena JavaScript biblioteka koja vam pomaže izgraditi sljedeću generaciju HTML5 i CSS3-pokrenute web-lokacije". Tehnički, Modernizr će testirati podršku preglednika za određene nove elemente i značajke. Ako podrška nije pružena, tada moramo pružiti zamjenu bilo davanjem različitih stilova ili pružanjem polyfills. U ovom slučaju, koristit ćemo Modernizr da nam pomogne testirati detalje i element sažetka.

1. Idite na Modernizr i prijeđite na stranicu za preuzimanje.

2. Na stranici za preuzimanje, Modernizr pruža neke opcije za konfiguriranje knjižnice, tako da morate odabrati samo određene značajke koje su vam zaista potrebne za vašu web stranicu. U ovom slučaju, trebamo:

   • HTML5Shiv 3.4
   • Dodaj CSS klase, ova značajka automatski će umetnuti klase u html oznaku.
   • Modernizr.load,
   • idite na okvir dodataka za zajednicu i odaberite ELEM-detalji,
   • U odjeljku proširivosti odaberite Modernizr.addTest.
3. Generirajte i preuzmite datoteku.
4. Povežite ga s HTML-om i ponovno učitajte stranicu u programu Internet Explorer. Stranica je trebala biti oblikovana jer Internet Explorer sada može prepoznati oznake.

A ako pogledate izvorni ili pregledni element, naći ćete da je klasa bez detalja umetnuta u html oznaku; što označava da preglednik u kojem pregledavamo stranicu; trenutno ne podržava elemente detalja. @@@@ [Ne mogu razumjeti ovu rečenicu. ]

Tada možemo stvoriti rezervnu upotrebu ove klase kao udice, što ćemo raditi u sljedećem koraku.

Povratni

U ovom koraku pružit ćemo slične detalji funkcionalnost elemenata za druge preglednike (osim Chromea). U prethodnom postu ovaj je korak automatski izvršen pomoću ove skripte, ali ovaj put ćemo je sami izraditi.

Bilješka: Samo pregledam malo iz našeg prethodnog posta; element detalja trenutačno je podržan samo u pregledniku Chrome.

Počnimo raditi na CSS-u.

Na oznaci sažetka mijenjamo način pokazivača na pokazivač, tako da će korisnik primijetiti da je moguće kliknuti.

 summary pokazivač: pokazivač; veličina fonta: 12pt; obris: 0; 

Da biste dodali više mjesta na vrhu i dnu elementa detalja s marginom.

 pojedinosti margin: 20px 0px; 

Oznaka sažetka prema zadanim postavkama ima strelicu. Ali ovdje bismo ga zamijenili ikonom plus-minus.

Bilješka: Prije no što sam nastavio, ikone iz ove zbirke prethodno sam preuzela od strane Fugue, preuzela ih i ispisala u jednu datoteku.

Dodajmo pseudo-element i dodamo ikonu kao pozadinu. Primijetite da je u ovom trenutku pozicija u pozadini na vrhu koja će prikazati ikonu plus.

 detalji> sažetak: prije width: 16px; visina: 16px; prikaz: inline-blok; sadržaj: "! important; background: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') Pozicija: relativna, gornja: 2px;

Zatim, kada je element detalja otvoren, pozadinska pozicija će se pomaknuti na dno koje će prikazati ikonu minus.

 pojedinosti [otvoriti]> sažetak: prije, details.open> summary: before background: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png' ) središnje dno bez ponavljanja; 

[otvorena] znak je selektor. U tom slučaju, on će odabrati atribut otvorenosti detalja u podržanom pregledniku.

Konačno bismo trebali sakriti strelicu koja je prema zadanim postavkama prikazana u Chromeu.

 detalji> Sažetak :: - webkit-details-marker display: none; 

Tada ćemo vidjeti rezultat u pregledniku neko vrijeme.

Zadana strelica sada je zamijenjena našom ikonom, a ako je vidite u pregledniku Chrome, već ćete imati efekt preklapanja kada ga kliknete; ikona će se promijeniti u skladu s tim. No, u drugim preglednicima ništa se neće dogoditi. Dakle, u sljedećem koraku pokušat ćemo ponoviti učinak s jQuery.

Učinak preklapanja s jQuery

Prije nego što počnemo s jQuery dijelom, htio bih se zahvaliti Ianu Devlinu na inspiraciji, skripta u nastavku je zapravo neznatna modifikacija njegova.

U redu, stvorimo varijablu za spremanje oznake sažetka.

 var sažetak = $ ('sažetak detalja'); 

Zatim zamotamo sve sibling elemente sažetka s a div.

summary.siblings (). wrapAll (”
);

I sakrijte taj div kada element detalja nema otvorenu klasu.

$ ('pojedinosti: nije (.open) sažetak'). siblings ('div'). hide ();

Kada se klikne na sažetak, želimo da se prikaže skriveni div, a suprotno, kada je podjela na početku otvorena, ona bi bila skrivena.

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

Da bismo bili sigurni da će se te funkcije izvršavati samo u nepodržanim preglednicima, premjestit ćemo ih unutar ove uvjetne naredbe.

 if ($ ('html'). hasClass ('no-details')) // ovdje kod dolazi

U nastavku je kôd koji imamo:

 if ($ ('html').) hasClass ('no-details')) var summary = $ ('sažetak detalja'); summary.siblings (). wrapAll (”
); $ ('pojedinosti: nije (.open) sažetak'). siblings ('div'). hide (); summary.click (function () $ (this) .siblings ('div'). toggle (); $ ('details'). toggleClass ('open');); 

Sada ćemo ga testirati u pregledniku; prekidač je trebao raditi na svim preglednicima, osobno sam provjerio (sve dok Internet Explorer 7).

• Demo
• Preuzimanje izvora

Savjet: Alternativno možete promijeniti .preklopni () s .slideToggle () za stvaranje efekta slajda. Također, ako želite da se početni detalj otvori, možete dodati razred otvoren u elementu detalja.

Zaključak

Prošli smo sve korake izrade jedne stranice proizvoda pomoću HTML5, ispravljanje pogrešaka za nepodržane preglednike, kao i ponavljanje efekta toggle za element detalja na vlastitu, tako da se nadamo da možete puno naučiti iz njega.

Međutim, svjestan sam da u ovom postu nisam sve detaljno objasnio, pa ako želite nešto razjasniti, slobodno postavite pitanje u okvir za komentare ispod.