Alustame.

HTML5-märgistus

Esiteks peame looma html dokument, millel on järgmine märgistus:

 
 
 
 
Apple iPhone 4 - 16GB
 
Kõige hämmastavam iPhone veel.
 
 
 
  
 
 
Kiirem kahetuumaline A5 kiip. 8MP kaamera koos uue optikaga ka 1080p HD videot. Ja tutvustades Siri. See on veel kõige hämmastavam iPhone.
 
 
Toote omadused
 
 
8 megapiksline kaamera koos täieliku 1080p videosalvestusega
 
Siri häälab
 
iCloud
 
Air Print
 
Võrkkesta ekraan
 
Fotode ja videote geodeering
 
 
 Osta kohe 
 
 

Me kasutame HTML5 spetsifikatsioonist mitmeid uusi silte, nagu näiteks päis, hgroup, joonis, lõik, ja üks, mida oleme varem arutanud; the üksikasjad ja kokkuvõte silt.

Kuid me ei kaota neid silte, mitte sellepärast, et me ei taha, vaid pigem on need põhiteemad, mida mujalt kergesti leiad. Niisiis, kui olete HTML5-s tõesti uus, soovitan teil lugeda järgmiste siltide viiteid; nad on neid põhjalikult selgitanud:

• Räägime semantilisest
• HTML5 päise element
• Hgroup Element
• HTML5-märgise viide

Nüüd vaatame meie lehe esimest välimust.

Noh, see tundub mõistlik ilma igasuguste stiilideta. Kõige üleval on päis ja seejärel kuvatakse pilt, kirjeldus ja lõpuks nupu Osta kohe. Nüüd, leiame selle lehe üles.

Stiilid

Alustame kõigi stiilitabelite tavapäraste stiilide normaliseerimisega ja lisame html silt.

 html kõrgus: 100%; taust: # f3f3f3; taust: -moz-lineaarne gradient (ülemine, # f3f3f3 0%, #ffffff 50%); taust: -webkit-gradient (lineaarne, vasakul üleval, vasakul, värvipeatus (0%, # f3f3f3), värvipeatus (50%, # ffffff)); taust: -webkit-lineaarne gradient (ülemine, # f3f3f3 0%, # ffffff 50%); taust: -o-lineaarne gradient (ülemine, # f3f3f3 0%, # ffffff 50%); taust: -ms-lineaarne gradient (ülemine, # f3f3f3 0%, # ffffff 50%); taust: lineaarne gradient (ülemine, # f3f3f3 0%, # ffffff 50%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3", endColorstr = "# ffffff", GradientType = 0); 

Pidage meeles, et meie tooteelemendid on kõik pakitud div tooteklassiga. Niisiis, siin me tahaksime ümbrise keskele asetada ja määrata laiuse 650px.

 .ümbris laius: 650 px; marginaal: auto; polsterdus: 25px 0px; 

Päiseosa

Päiseosas on kaks rubriiki h1 ja h4, olgem stiil need elemendid.

 h1, h4 font-pere: Helvetica Neue, Arial, sans-serif; fondi kaal: normaalne; varu: 0;  h1 font-size: 24pt;  h4 font-size: 16pt; värv: #aaa; 

Ja seejärel lisage väike ala päis marginaaliga.

 päis margin-bottom: 20px; 

Kui vaatate päise väga paremat külge, oleks seal palju tühikut.

Miks siis ka Apple'i logo panna.

 päis margin-bottom: 20px; taust: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png') parempoolne keskpunkt; 

Toote pilt

Seejärel libistage pilt vasakule ja seadke pildi maksimaalne laius 350tk.

 joonis float: vasakul;  joonis img max-width: 350px; 

Kuna pilt on lükatud vasakule, siis ujukime kirjelduse sektsiooni paremale ja seadistame laiuse 300tk.

 lõik font-family: Tahoma, Arial, sans-serif; joone kõrgus: 150%; float: parem; laius: 300 px; värv: # 333; 

Nüüd vaatame tulemust siiani.

See hakkab hästi nägema, kuid üksikasjade silt ei toimi veel (va Chrome'is), nii et olgem järgmine nupp.

Nupp

Nupu stiilide puhul jäljendame seda Apple.com poest. Ja siin on kõik süntaksid, mida peate oma stiili lehele panema.

 nupp taust: # 36a9ea; taust: -moz-lineaarne gradient (ülemine, # 36a9ea 0%, # 127fd2 100%); taust: -webkit-gradient (lineaarne, vasakul üleval, vasakul, värvipeatus (0%, # 36a9ea), värvipeatus (100%, # 127fd2)); taust: -webkit-lineaarne gradient (ülemine, # 36a9ea 0%, # 127fd2 100%); taust: -o-lineaarne gradient (ülemine, # 36a9ea 0%, # 127fd 100%); taust: -ms-lineaarne gradient (ülemine, # 36a9ea 0%, # 127fd2 100%); taust: lineaarne gradient (ülemine, # 36a9ea 0%, # 127fd2 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 36a9ea", endColorstr = "# 127fd2", GradientType = 0); piir: 1px tahke # 00599d; värv: #fff; polsterdus: 8px 20px; -webkit-border-radius: 3px; raadius: 3x; -webkit-box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), sisend 0px 1px 0px 0px rgba (250, 250, 250, .3); box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), sisend 0px 1px 0px 0px rgba (250, 250, 250, .3); teksti-vari: 0px 1px 1px # 156cc4; filter: dropshadow (värv = # 156cc4, offx = 0, offy = 1); fondi suurus: 10pt;  nupp: hover background: # 2f90d5; taust: -moz-lineaarne gradient (ülemine, # 2f90d5 0%, # 0351b7 100%); taust: -webkit-gradient (lineaarne, vasakul üleval, vasakul, värvipeatus (0%, # 2f90d5), värvipeatus (100%, # 0351b7)); taust: -webkit-lineaarne gradient (ülemine, # 2f90d5 0%, # 0351b7 100%); taust: -o-lineaarne gradient (ülemine, # 2f90d5 0%, # 0351b7 100%); taust: -ms-lineaarne gradient (ülemine, # 2f90d5 0%, # 0351b7 100%); taust: lineaarne gradient (ülemine, # 2f90d5 0%, # 0351b7 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 2f90d5", endColorstr = "# 0351b7", GradientType = 0);  nupp: aktiivne taust: # 127fd2; -webkit-box-shadow: sisend 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); kast-vari: sisend 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); 

Nüüd peaks nupp parem välja nägema.

Probleem Internet Exploreris

Nagu tavaliselt, põhjustab IE (Internet Explorer) alati probleeme; kui avate selle mis tahes IE-s, mis on madalam kui 9, jääb leht stiilile.

Seda seetõttu, et Internet Explorer ei tunnista uusi elemente (lõik, päis, jne), nii et stiilid, mida oleme määranud, ei sobi. Seega teeme järgmise sammuna selle probleemi lahendamiseks.

Brauseri toe testimine

Meie eelmises postituses oleme käsitlenud selle elemendi elementi brauseri tuge, kasutades seda polüfillit; nii et see võiks töötada toetamata brauserites. Kuid seekord püüame Modernizriga seda teha.

Oma ametlikul veebilehel, "Modernizr on avatud lähtekoodiga JavaScript-raamatukogu, mis aitab teil järgmise põlvkonna ehitada HTML5 ja CSS3-powered veebilehed". Tehniliselt testib Modernizr brauseri tuge teatud uute elementide ja funktsioonide jaoks. Kui toetust ei anta, peame tagama, kas see on erinevate stiilide või pakkumiste andmisega polüfillid. Sellisel juhul kasutame Modernizri, et aidata meil detailide ja kokkuvõtliku elemendi testimist.

1. Mine Modernizrile ja jätkake allalaadimise lehele.

2. Allalaadimise lehel pakub Modernizr mõningaid võimalusi raamatukogu konfigureerimiseks, nii et teil on vaja valida ainult teatud funktsioonid, mida te oma veebisaidi jaoks vajate. Sel juhul on meil vaja:

   • HTML5Shiv 3.4
   • Lisa CSS klassid, see funktsioon sisestab klassid automaatselt HTML-märgisesse.
   • the Modernizr.load,
   • minge ühenduse lisandmoodulite kasti ja valige elem-detailid,
   • Valige laiendatavuse jaotises Modernizr.addTest.
3. Faili loomine ja allalaadimine.
4. Linkige see oma HTML-iga ja laadige leht uuesti Internet Explorerisse. Lehekülg oleks pidanud nüüd olema kujundatud, kuna Internet Explorer saab nüüd sildid tuvastada.

Ja kui vaatate allikat või kontrollite elementi, leiad html-sildi lisamata klassi; näitab, et brauser, kus me lehekülge eelvaatame; praegu ei toeta üksikasjalikku elementi. @@@@ [Ma ei saa sellest lausest aru. ]

Siis saame luua selle klassi konksu taga, mida teeme järgmises etapis.

Tagasi

Selles etapis pakume sarnast üksikasjad elementide funktsionaalsus teiste brauserite jaoks (va Chrome). Eelmises postituses tehti see samm selle skripti abil automaatselt, kuid seekord loome selle ise.

Märge: Lihtsalt vaadake natuke meie eelmisest postitusest; üksikasjade element on praegu toetatud ainult Chrome'i brauseris.

Niisiis, alustame kõigepealt CSS-iga töötamist.

Kokkuvõtvalt me ​​muudame kursori režiimi kursoriks, nii et kasutaja märkab, et see on klõpsatav.

 kokkuvõte kursor: pointer; fondi suurus: 12pt; ülevaade: 0; 

Andmete elemendi üla- ja alaosas on rohkem ruumi marginaali andmiseks.

 üksikasjad margin: 20px 0px; 

Vaikimisi on kokkuvõtvalvel nool. Aga siin tahaksime asendada selle plussmiin ikooniga.

Märge: Enne jätkamist laadisin Fugue poolt selle kollektsiooni ikoonid alla, laadisin alla ja heitsin neid üheks failiks.

Lisame enne pseudoelementi ja kinnitame ikooni taustana. Pange tähele, et sel hetkel on taustasend üleval, mis näitab plussikooni.

 üksikasjad> kokkuvõte: enne laius: 16px; kõrgus: 16x; kuva: inline-block; sisu: "! oluline; taust: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') ei korrata keskmist ülemist osa; Positsioon: suhteline; ülemine: 2px;

Seejärel, kui detailielement on avatud, liigub taustasend põhja, mis näitab miinusikooni.

 üksikasjad [open]> kokkuvõte: enne, details.open> Summary: enne taust: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png' ) keskmisest põhjata; 

The [avatud] märk on valija. Sel juhul valib see brauseris toetava atribuudi.

Lõpuks peaksime peitma noolt, mis Chrome'is vaikimisi kuvatakse.

 üksikasjad> kokkuvõte :: - webkit-details-marker display: none; 

Seejärel näeme mõnda aega brauseris tulemust.

Vaikimisi kuvatud nool on nüüd asendatud meie ikooniga ja kui te seda Chrome'is näete, on teil juba klõpsamisel klaviatuuril vahetamise efekt; ikoon muutub vastavalt. Kuid teistes brauserites ei juhtu midagi. Niisiis, järgmises etapis püüame korrata efekti jQueryga.

JQueryga lülitumine

Enne kui alustame jQuery-osaga, tahaksin tänada Ian Devlini inspiratsiooni eest, allpool olev skript on tegelikult väike muutus tema.

Olgu, luuakse muutuja, et salvestada kokkuvõtlik silt.

 var summary = $ („detailide kokkuvõte”); 

Siis pakume kokkuvõtte kõik õde-vendade elemendid a-ga div.

Summary.siblings (). wrapAll ('
');

Ja peida see div, kui detailielemendil pole avatud klassi.

$ ('üksikasjad: mitte (.open) kokkuvõte).) õed-vennad (' div '). hide ();

Kui kokkuvõtet klõpsatakse, siis tahame näidata peidetud divi ja vastupidi, kui div on esialgu avatud, oleks see peidetud.

 Summary.click (funktsioon () $ (this) .siblings ('div'). toggle (); $ ('üksikasjad') toggleClass ('open');); 

Veendumaks, et need funktsioonid täidetakse ainult toetamata brauserites, pakume need selle tingimusliku avalduse sisse.

 kui ($ ('html'). hasClass ('no-details')) // kood siit

Ja allpool on kood, mis meil on:

 kui ($ ('html'). hasClass ('no-details')) var summary = $ ('üksikasjade kokkuvõte'); Summary.siblings (). wrapAll ('
'); $ ('üksikasjad: mitte (.open) kokkuvõte).) õed-vennad (' div '). hide (); Summary.click (funktsioon () $ (this) .siblings ('div'). toggle (); $ ('üksikasjad') toggleClass ('open');); 

Nüüd katsetame seda brauseris; ümberlülitusefekt oleks pidanud töötama kõigis brauserites, olen isiklikult kontrollinud (kuni Internet Explorer 7).

• Demo
• Allalaadimise allikas

Nõuanded: Teise võimalusena saate seda muuta .ümberlülitamine () koos .slideToggle () slaidiefekti loomiseks. Kui soovite, et detail avataks esialgu, saate detailide elemendis avada klassi.

Järeldus

Oleme läbi viinud kõik sammud, et luua HTML5 abil üks toote leht, silumislahendused toetamata brauserite jaoks, samuti kordame detailelemendi vahetamise efekti meie enda poolt, nii et loodetavasti saate sellest palju õppida.

Kuid ma olen teadlik, et ma ei selgitanud kõike üksikasjalikult selles postituses, nii et kui soovite midagi üles öelda, saatke küsimus allpool olevasse märkeruutu..