Začnime.

Značka HTML5

Po prvé, musíme vytvoriť html dokument s nasledujúcim označením:

 
 
 
 
Apple iPhone 4 - 16 GB
 
Najkrajší iPhone ešte.
 
 
 
  
 
 
Rýchlejší dvojjadrový čip A5. 8-megapixelový fotoaparát s úplne novou optikou tiež nasníma 1080p HD video. A zavádzanie Siriho. Je to naozaj úžasný iPhone ešte.
 
 
Vlastnosti produktu
 
 
8 megapixelový fotoaparát s úplným nahrávaním videa s rozlíšením 1080p
 
Siri hlasový asistent
 
iCloud
 
Vzduchové tlače
 
Retina displej
 
Geografické označovanie fotografií a videa
 
 
 Kúpte teraz 
 
 

Používame niekoľko nových značiek zo špecifikácie HTML5, ako napr hlavička, hgroup, figúra, časť, a jeden, o ktorom sme už predtým diskutovali; podrobnosti a zhrnutie štítok.

Nebudeme však do týchto značiek kopať, nie preto, že nie sme ochotní, ale skôr to sú základné témy, ktoré môžete ľahko nájsť inde. Takže, ak ste naozaj nový HTML5, odporúčam vám prečítať si nasledujúce odkazy týchto značiek; vysvetlil ich komplexne:

• Hovorme o sémantickej
• Element hlavičky HTML5
• Prvok hgroup
• Odkaz na značku HTML5

Teraz uvidíme prvú prezentáciu našej stránky.

No, to vyzerá rozumne bez akýchkoľvek štýlov. Na vrchole sa nachádza hlavička a potom sa nachádza časť pre obrázok, popis a nakoniec tlačidlo "Kúpiť teraz". Teraz, vyzdvihnúť túto stránku.

Styly

Začneme tým, že normalizujeme všetky predvolené štýly pomocou tohto štýlu šablón a pridáme gradientové pozadie do html štítok.

 html výška: 100%; pozadie: # f3f3f3; pozadie: -moz-linear-gradient (top, # f3f3f3 0%, #ffffff 50%); pozadie: -webkit-gradient (lineárny, ľavý horný, ľavý spodný, farebný stop (0%, # f3f3f3), farebný stop (50%, # ffffff)); pozadie: -webkit-linear-gradient (vrchol, # f3f3f3 0%, # ffffff 50%); pozadie: -o-lineárny gradient (vrchol, # f3f3f3 0%, # ffffff 50%); pozadie: -ms-lineárny gradient (vrchol, # f3f3f3 0%, # ffffff 50%); pozadie: lineárny gradient (vrchol, # f3f3f3 0%, # ffffff 50%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3", endColorstr = "# ffffff", GradientType = 0); 

Nezabudnite, že naše prvky produktu sú zabalené do a div s produktovou triedou. Takže tu by sme chceli centrovanie obálky a nastaviť šírku okolo 650px.

 .obal (šírka: 650 pixlov; marža: auto; polstrovanie: 25px 0px; 

Sekcia záhlavia

V sekcii hlavičky máme dve nadpisy h1 a h4, tak poďme štýl tieto prvky.

 h1, h4 font-family: Helvetica Neue, Arial, sans-serif; veľkosť písma: normálna; rozpätie: 0;  h1 veľkosť písma: 24pt;  h4 veľkosť písma: 16pt; farba: #aaa; 

A potom pridajte malý priestor v dolnej časti hlavička s maržou.

 hlavička margin-bottom: 20px; 

Ak sa pozriete na pravú stranu hlavičky, na tejto strane by bolo veľa medzery.

Tak prečo tiež neumiestíme logo Apple tam.

 hlavička margin-bottom: 20px; pozadie: url ('... /https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png') no-repeat right center; 

Obrázok produktu

Ďalej posuňte obrázok doľava a nastavte maximálnu šírku záberu na 350px.

 obrázok float: left;  obrázok img max-width: 350px; 

Pretože obrázok bol posunutý doľava, roztiahneme časť popisu napravo a nastavíme šírku na 300px.

 sekcia font-family: Tahoma, Arial, sans-serif; výška výšky: 150%; float: vpravo; šírka: 300px; farba: # 333; 

Teraz uvidíme výsledok doteraz.

Začína to dobre vyzerat, ale značka s podrobnosťami stále nefunguje (s výnimkou prehliadača Chrome). Takže budeme nasledovať štýl.

Tlačidlo

Pre štýly tlačidiel budeme napodobňovať ten z obchodu Apple.com. A tu je všetka syntax, ktorú musíte vložiť do svojho štýlu pre tlačidlo.

 tlačidlo background: # 36a9ea; pozadie: -moz-linear-gradient (vrchol, # 36a9ea 0%, # 127fd2 100%); pozadie: -webkit-gradient (lineárny, ľavý horný, ľavý spodný, farebný stop (0%, # 36a9ea), farebný stop (100%, # 127fd2)); pozadie: -webkit-linear-gradient (hore, # 36a9ea 0%, # 127fd2 100%); pozadie: -o-lineárny gradient (vrchol, # 36a9ea 0%, # 127fd2 100%); pozadie: -ms-lineárny gradient (hore, # 36a9ea 0%, # 127fd2 100%); pozadie: lineárny gradient (vrchol, # 36a9ea 0%, # 127fd2 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 36a9ea", endColorstr = "# 127fd2", GradientType = 0); hranica: 1px pevná # 00599d; farba: #fff; polstrovanie: 8px 20px; -webkit-border-radius: 3px; polomer okrajov: 3px; -webkit-box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), vložiť 0px 1px 0px 0px rgba (250, 250, 250, .3); box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), vložiť 0px 1px 0px 0px rgba (250, 250, 250, .3); text-tieň: 0px 1px 1px # 156cc4; filter: dropshadow (farba = # 156cc4, offx = 0, offy = 1); veľkosť písma: 10pt;  tlačidlo: vzdialiť background: # 2f90d5; pozadie: -moz-linear-gradient (top, # 2f90d5 0%, # 0351b7 100%); pozadie: -webkit-gradient (lineárny, ľavý horný, ľavý spodný, farebný stop (0%, # 2f90d5), farebný stop (100%, # 0351b7)); pozadie: -webkit-linear-gradient (top, # 2f90d5 0%, # 0351b7 100%); pozadie: -o-lineárny gradient (vrchol, # 2f90d5 0%, # 0351b7 100%); pozadie: -ms-lineárny gradient (vrchol, # 2f90d5 0%, # 0351b7 100%); pozadie: lineárny gradient (vrchol, # 2f90d5 0%, # 0351b7 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 2f90d5", endColorstr = "# 0351b7", GradientType = 0);  tlačidlo: aktívne background: # 127fd2; -webkit-box-shadow: vložiť 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); box-shadow: vložiť 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); 

Teraz by tlačidlo malo vyzerať lepšie.

Problém v programe Internet Explorer

Ako obvykle IE (Internet Explorer) vždy spôsobuje nejaké problémy; ak ho otvoríte v ľubovoľnej IE nižšej než 9, stránka zostane nezmenená.

Dôvodom je, že program Internet Explorer neuznáva nové prvky (časť, hlavička, atď.), takže štýly, ktoré sme špecifikovali, sa neuplatňujú. Takže v ďalšom kroku budeme pracovať na riešení tohto problému.

Testovanie podpory prehliadača

V našom predchádzajúcom príspevku sme riešili podporu prehliadača pre prvok podrobností pomocou tohto polyfill; takže by to mohlo fungovať v nepodporovaných prehliadačoch. Tentokrát však budeme skúsiť rôzne spôsoby, ako to urobiť s Modernizrom.

Z oficiálnych webových stránok, "Modernizr je open source knižnica JavaScript, ktorá vám pomôže vybudovať ďalšiu generáciu HTML5 a CSS3-powered websites". Technicky bude Modernizr testovať podporu prehliadača pre určité nové prvky a funkcie. Ak nie je poskytnutá podpora, musíme poskytnúť núdzu, či už prinášame rôzne štýly alebo poskytovanie polyfills. V tomto prípade budeme používať Modernizr, ktorý nám pomôže otestovať podrobnosti a súhrnný prvok.

1. Prejdite na stránku Modernizr a prejdite na stránku na prevzatie.

2. Na stránke na prevzatie poskytuje Modernizr niekoľko možností konfigurácie knižnice, takže si musíte vybrať iba niektoré funkcie, ktoré skutočne potrebujú vaše webové stránky. V tomto prípade potrebujeme:

   • HTML5Shiv 3.4
   • Pridať triedy CSS, táto funkcia automaticky vloží do html tagu triedy.
   • Modernizr.load,
   • prejdite do poľa doplnkov komunity a vyberte ELEM detaily,
   • V časti Rozšíriteľnosť vyberte položku Modernizr.addTest.
3. Vytvorte a stiahnite súbor.
4. Prepojte ho s html a znovu načítajte stránku v programe Internet Explorer. Stránka mala byť teraz vytvorená v štýle, pretože aplikácia Internet Explorer teraz rozpoznáva značky.

A ak si prezriete zdroj alebo skontrolujete prvok, zistíte, že v html štítku bola vložená trieda bez podrobností; čo naznačuje, že prehliadač, na ktorom si prezeráme stránku; v súčasnosti nepodporuje prvok podrobností. @@@@ Túto vetu nemôžem pochopiť. ]

Potom môžeme vytvoriť záložnú skupinu, ktorá využije túto triedu ako hák, ktorý budeme robiť v ďalšom kroku.

Fallback

V tomto kroku poskytneme podobné podrobnosti funkcia pre ostatné prehliadače (okrem prehliadača Chrome). V predchádzajúcom príspevku bol tento krok automaticky vykonaný pomocou tohto skriptu, tentoraz ho však vytvoríme samostatne.

Poznámka: Stačí si trochu prečítať náš predchádzajúci príspevok; prvok podrobností je v súčasnosti podporovaný iba v prehliadači Chrome.

Takže najprv začnime pracovať na CSS.

Na súhrnnej značke zmeníme kurzor na ukazovateľ, takže používateľ si všimne, že je možné kliknúť.

 súhrn kurzor: ukazovateľ; veľkosť písma: 12pt; obrys: 0; 

Pridajte väčšie medzery v hornej a dolnej časti elementu podrobností s okrajom.

 detaily margin: 20px 0px; 

V predvolenom nastavení má súhrnná značka šípku. Ale tu by sme ho chceli nahradiť ikonou plus-mínus.

Poznámka: Predtým, ako som pokračoval, som si predtým stiahol ikony z tejto kolekcie Fugue, stiahol som ich a napísal ich do jedného súboru.

Pridajme pred pseudo-element a pripojíme ikonu ako pozadie. Všimnite si, že na tomto mieste je pozadie pozadia na vrchu, v ktorom sa zobrazí ikona plus.

 detaily> súhrn: pred width: 16px; výška: 16px; zobrazenie: inline-block; obsah: "! dôležité; pozadie: url ('... /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') no-repeat center top; margin-right: 5px; pozícia: relatívna; top: 2px;

Potom, keď je prvok s podrobnosťami otvorený, pozadie pozadia sa presunie do spodnej časti, v ktorom sa zobrazí ikona mínusu.

 detaily [otvorené]> súhrn: pred, detail.open> zhrnutie: pred background: url ('... /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png' ) no-repeat bottom center; 

[otvorené] znamienko je volič. V takomto prípade si v podpore prehliadača vyberie atribút open details.

Nakoniec by sme mali skryť šípku, ktorá sa predvolene zobrazí v prehliadači Chrome.

 detaily> súhrn :: - webkit-details-marker display: none; 

Potom ukážeme výsledok v prehliadači na chvíľu.

Predvolená šípka bola teraz nahradená našou ikonou a ak ju vidíte v prehliadači Chrome, po kliknutí na ňu už budete mať prepínací efekt. ikona sa príslušne zmení. Ale v iných prehliadačoch sa nič nestane. Takže v ďalšom kroku sa pokúsime replikovať efekt pomocou jQuery.

Prepínací efekt s jQuery

Predtým, ako začneme s časťou jQuery, chcem poďakovať Ianovi Devlinovi za inšpiráciu, nižšie uvedený skript je vlastne mierna zmena jeho.

V poriadku, vytvoríme premennú na ukladanie súhrnnej značky.

 var summary = $ ('súhrn podrobností'); 

Potom obalíme všetky súrodenské prvky súhrnu s div.

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

A skryť to div, keď prvok podrobností nemá otvorenú triedu.

$ ('podrobnosti: nie (.open) súhrn') súrodenci ('div') hide ();

Po kliknutí na zhrnutie chceme, aby sa skrytá div ukázala a naopak, keď je div otvorená, skryje sa.

 sumár.click (funkcia () $ (toto) .siblings ('div') toggle (); $ ('podrobnosti') toggleClass ('open'); 

Aby sme sa uistili, že tieto funkcie budú vykonané iba v nepodporovaných prehliadačoch, zabalíme ich do tohto podmieneného vyhlásenia.

 ak ($ ​​('html') hasClass ('no-details')) // kód ide tu

A nižšie je kód, ktorý máme:

 ak ($ ​​('html')) hasClass ('no-details')) var summary = $ ('súhrn informácií'); summary.siblings (). wrapAll ( '
,); $ ('podrobnosti: nie (.open) súhrn') súrodenci ('div') hide (); sumár.click (funkcia () $ (toto) .siblings ('div') toggle (); $ ('podrobnosti') toggleClass ('open'); 

Teraz to skúsme v prehliadači; prepínací efekt by mal teraz fungovať na všetkých prehliadačoch, osobne som skontroloval (do programu Internet Explorer 7).

• demonštrácie
• Stiahnuť zdroj

Tipy: Alternatívne môžete zmeniť .Prepínač () s .slideToggle () vytvoriť efekt posúvania. Tiež ak chcete, aby bol prvok otvorený, môžete do prvku podrobností pridať triedy otvorené.

záver

Prešli sme všetkými krokmi vytvorením jedinej stránky produktu pomocou HTML5, ladením pre nepodporované prehliadače a tiež replikovaním prepínacieho efektu pre prvok detailov na vlastnú päsť, takže dúfajme, že sa z toho veľa naučíte.

Som si však vedomý, že som v tomto príspevku podrobne nevysvetlil, takže ak chcete niečo vymazať, neváhajte a vložte otázku do poľa s poznámkami nižšie.