Lad os komme igang.

HTML5 Markup

For det første skal vi oprette en html dokument med følgende markering:

 
 
 
 
Apple iPhone 4 - 16GB
 
Den mest fantastiske iPhone endnu.
 
 
 
  
 
 
Den hurtigere dual-core A5 chip. 8MP kameraet med helt ny optik optager også 1080p HD-video. Og introducerer Siri. Det er den mest fantastiske iPhone endnu.
 
 
produktegenskaber
 
 
8 megapixel kamera med fuld 1080p videooptagelse
 
Siri stemme assitant
 
iCloud
 
Air Print
 
Retina skærm
 
Foto og video geotagging
 
 
 Køb nu 
 
 

Vi bruger flere nye tags fra HTML5 spec., Ligesom header, hgroup, figur, afsnit, og en, vi har diskuteret før; det detaljer og Resumé tag.

Men vi vil ikke grave ind i disse tags, ikke fordi vi ikke er villige til det, men det er snarere disse emner, som du nemt kan finde andre steder. Så hvis du er virkelig ny til HTML5, vil jeg anbefale dig at læse følgende referencer for disse tags; de har forklaret dem grundigt:

• Lad os tale om semantisk
• HTML5 Header Element
• Hgroup Element
• HTML5 Tag Reference

Lad os nu se vores første udseende.

Nå, det ser fornuftigt ud uden nogen stilarter. Øverst er der overskriften, og derefter kommer afsnittet for billedet, beskrivelsen og endelig 'Køb nu' knappen. Lad os nu opbygge denne side.

Stilarterne

Vi vil starte med at normalisere alle standardstile ved hjælp af dette stylesheet og tilføje en gradient baggrund til html tag.

 html højde: 100%; baggrund: # f3f3f3; baggrund: -moz-lineær gradient (top, # f3f3f3 0%, #ffffff 50%); baggrund: -webkit-gradient (lineær, venstre top, venstre bund, farve stop (0%, # f3f3f3), farve stop (50%, # ffffff)); baggrund: -webkit-lineær-gradient (top, # f3f3f3 0%, # ffffff 50%); baggrund: -o-lineær gradient (top, # f3f3f3 0%, # ffffff 50%); baggrund: -ms-lineær gradient (top, # f3f3f3 0%, # ffffff 50%); baggrund: lineær gradient (top, # f3f3f3 0%, # ffffff 50%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3", endColorstr = "# ffffff", GradientType = 0); 

Husk at vores produktelementer er pakket ind indenfor a div med produktklassen. Så her vil vi gerne centrere wrappen og sætte bredden til at være omkring 650 pixels.

 .indpakning bredde: 650px; margen: auto; polstring: 25px 0px; 

Overskriftsafsnittet

I overskriftsafsnittet har vi to overskrifter h1 og h4, så lad os style disse elementer.

 h1, h4 font-familie: Helvetica Neue, Arial, sans-serif; skrifttype-vægt: normal; margen: 0;  h1 font-size: 24pt;  h4 font-size: 16pt; farve: #aaa; 

Og så tilføj lidt plads i bunden af header med en margen.

 header margin-bottom: 20px; 

Hvis du ser på højre side af overskriften, ville der være meget hvide rum i den side.

Så hvorfor sætter vi os heller ikke Apple-logoet.

 header margin-bottom: 20px; baggrund: url ('... /https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png') ingen gentag højre center; 

Produktbillede

Flyt derefter billedet til venstre og indstil billedets maksimale bredde til 350 pixel.

 figur float: left;  figur img maksimal bredde: 350px; 

Da billedet er blevet skubbet til venstre, så flyder vi beskrivelsesdelen til højre og indstiller bredden til 300px.

 afsnit font-family: Tahoma, Arial, sans-serif; linjens højde: 150%; flyde: højre; bredde: 300px; farve: # 333; 

Lad os se resultatet så langt.

Det begynder at se godt ud, men detaljeringsetiketten virker stadig ikke (undtagen i Chrome), så lad os style knappen næste.

Knappen

For knappestjernerne vil vi efterligne den fra Apple.com Store. Og her er al den syntaks, du skal indsætte i dit stilark for knappen.

 knap baggrund: # 36a9ea; baggrund: -moz-lineær gradient (top, # 36a9ea 0%, # 127fd2 100%); baggrund: -webkit-gradient (lineær, venstre top, venstre bund, farve stop (0%, # 36a9ea), farve stop (100%, # 127fd2)); baggrund: -webkit-lineær gradient (top, # 36a9ea 0%, # 127fd2 100%); baggrund: -o-lineær gradient (top, # 36a9ea 0%, # 127fd2 100%); baggrund: -ms-lineær gradient (top, # 36a9ea 0%, # 127fd2 100%); baggrund: lineær gradient (top, # 36a9ea 0%, # 127fd2 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 36a9ea", endColorstr = "# 127fd2", GradientType = 0); grænse: 1px solid # 00599d; farve: #fff; polstring: 8px 20px; -webkit-grænse-radius: 3px; grænse-radius: 3px; -webkit-boks-skygge: 0px 1px 1px 0px rgba (0, 0, 0, .1), indsæt 0px 1px 0px 0px rgba (250, 250, 250, .3); box-skygge: 0px 1px 1px 0px rgba (0, 0, 0, .1), indsæt 0px 1px 0px 0px rgba (250, 250, 250, .3); tekstskygge: 0px 1px 1px # 156cc4; filter: dropshadow (farve = # 156cc4, offx = 0, offy = 1); skrifttypestørrelse: 10pt;  knap: svinge baggrund: # 2f90d5; baggrund: -moz-lineær gradient (top, # 2f90d5 0%, # 0351b7 100%); baggrund: -webkit-gradient (lineær, venstre top, venstre bund, farve stop (0%, # 2f90d5), farve stop (100%, # 0351b7)); baggrund: -webkit-lineær gradient (top, # 2f90d5 0%, # 0351b7 100%); baggrund: -o-lineær gradient (top, # 2f90d5 0%, # 0351b7 100%); baggrund: -ms-lineær gradient (top, # 2f90d5 0%, # 0351b7 100%); baggrund: lineær gradient (top, # 2f90d5 0%, # 0351b7 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 2f90d5", endColorstr = "# 0351b7", GradientType = 0);  knap: aktiv baggrund: # 127fd2; -webkit-box-skygge: input 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); box-skygge: indsæt 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); 

Nu skal knappen se bedre ud.

Problem i Internet Explorer

Som sædvanlig forårsager IE (Internet Explorer) altid nogle problemer; Hvis du åbner dette i en hvilken som helst IE under 9, forbliver siden uformateret.

Dette skyldes, at Internet Explorer ikke genkender de nye elementer (afsnit, header, etc.), så de stilarter, vi har angivet, ikke passer. Således vil vi i det næste trin arbejde på at løse dette problem.

Test af browsersupport

I vores tidligere indlæg har vi tacklet browsersupporten for detaljeringselementet ved hjælp af denne polyfil; så det kunne fungere i de understøttede browsere. Men denne gang vil vi prøve forskellige måder at gøre det på med Modernizr.

Fra sin officielle hjemmeside, "Modernizr er et open-source JavaScript-bibliotek, der hjælper dig med at opbygge den næste generation af HTML5 og CSS3-powered websites". Teknisk vil Modernizr teste browsersupporten for visse nye elementer og funktioner. Hvis der ikke ydes støtte, skal vi give en tilbagesendelse, uanset om det er ved at give forskellige stilarter eller levere polyfills. I dette tilfælde bruger vi Modernizr til at hjælpe os med at teste detaljerne og det sammenfattende element.

1. Gå til Modernizr og fortsæt til dens download side.

2. På download siden giver Modernizr nogle muligheder for at konfigurere biblioteket, så du behøver kun at vælge bestemte funktioner, du virkelig har brug for til din hjemmeside. I dette tilfælde har vi brug for:

   • HTML5Shiv 3.4
   • Tilføj CSS-klasser, Denne funktion vil automatisk indsætte klasser i HTML-mærket.
   • det Modernizr.load,
   • Gå til tilføjelsesboks til fællesskab og vælg ELEM-detaljer,
   • I sektionen Udvidelser vælges Modernizr.addTest.
3. Generer og download filen.
4. Link det til din html og genindlæs siden i Internet Explorer. Siden skulle nu have været stylet, da Internet Explorer nu kan genkende tags.

Og hvis du ser kilden eller inspektionselementet, finder du den ikke-detaljerede klasse er blevet indsat i HTML-mærket; hvilket angiver, at browseren, hvor vi forhåndsviser siden understøtter i øjeblikket ikke detaljeringselementer. @@@@ [Jeg kan ikke forstå denne sætning. ]

Vi kan så lave en tilbagesendelse ved hjælp af denne klasse som krogen, som vi vil gøre i næste trin.

The Fallback

I dette trin vil vi give lignende detaljer elementfunktionalitet til andre browsere (ekskl. Chrome). I det foregående indlæg blev dette trin automatisk udført ved hjælp af dette script, men denne gang vil vi oprette det på egen hånd.

Bemærk: Bare gennemgang lidt fra vores tidligere indlæg; Detaljeringselementet understøttes i øjeblikket kun i Chrome-browseren.

Så lad os begynde at arbejde på CSS først.

På sammendragskoden ændrer vi markørtilstanden til pegeren, så brugeren vil bemærke, at den er klikbar.

 resumé cursor: pointer; skrifttypestørrelse: 12pt; omrids: 0; 

At give flere mellemrum på toppen og bunden af ​​detaljerelementet med en margen.

 detaljer margin: 20px 0px; 

Som standard vil opsummeringsmærket have en pil. Men her vil vi gerne erstatte det med et plus-minus ikon.

Bemærk: Før jeg fortsætter, har jeg tidligere downloadet ikonerne fra denne samling af Fugue, download og sprøjt dem til en fil.

Lad os tilføje et tidligere pseudo-element og vedhæfte ikonet som baggrund. Bemærk, at baggrundspositionen på dette tidspunkt er øverst, som viser plus-ikonet.

 detaljer> resumé: før bredde: 16px; højde: 16px; display: inline-block; indhold: "! vigtigt; baggrund: url ('... /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') no-repeat center top; margen-højre: 5px; position: relative; top: 2px;

Når detaljeringselementet er åbent, flyttes baggrundsstillingen til bunden, som viser minusikonet.

 detaljer [open]> resumé: før, detaljer.open> oversigt: før baggrund: url ('... /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png' ) no-repeat center bottom; 

Det [åben] tegn er en vælger. I dette tilfælde vælger den åbenhedsattributten, der understøtter browseren.

Endelig skal vi skjule pilen, der som standard vises i Chrome.

 detaljer> resumé :: - webkit-detaljer-markør display: none; 

Lad os se resultatet i en browser for et stykke tid.

Standardpilen er nu erstattet af vores ikon, og hvis du ser det i Chrome, har du allerede en skifteffekt, når du klikker på den. ikonet ændres i overensstemmelse hermed. Men i andre browsere vil der ikke ske noget endnu. Så i det næste trin vil vi forsøge at replikere effekten med jQuery.

Skift effekten med jQuery

Før vi begynder med jQuery-delen, vil jeg gerne takke Ian Devlin for inspirationen, scriptet nedenfor er faktisk en lille ændring af hans.

Okay, lad os oprette en variabel for at gemme sammendragstaggen.

 var summary = $ ('detaljeret oversigt'); 

Så pakker vi alle søskende elementer i resuméet sammen med a div.

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

Og gem den div, når detaljeringselementet ikke har den åbne klasse.

$ ('detaljer: ikke (.open) resumé'). søskende ('div'). skjul ();

Når sammendraget er klikket, vil vi have den skjulte div vist, og det modsatte, når div er oprindeligt åben, ville det være skjult.

 summary.click (funktion () $ (dette) .siblings ('div'). toggle (); $ ('detaljer'). toggleClass ('open');); 

For at sikre, at disse funktioner kun udføres i de ikke understøttede browsere, pakker vi dem inde i denne betingede erklæring.

 if ($ ('html'). hasClass ('no-details')) // koden går her

Og nedenfor er koden vi har:

 hvis ($ ('html'). hasClass ('no-details')) var summary = $ ('detaljeringsoversigt'); summary.siblings (). wrapAll ('
'); $ ('detaljer: ikke (.open) resumé'). søskende ('div'). skjul (); summary.click (funktion () $ (dette) .siblings ('div'). toggle (); $ ('detaljer'). toggleClass ('open');); 

Lad os nu teste det i browseren; skifte effekten skal nu have arbejdet på alle browsere, jeg personligt har tjekket (indtil Internet Explorer 7).

• Demo
• Download kilde

Tips: Alternativt kan du ændre .toggle () med .slideToggle () at oprette en dias-effekt. Også hvis du vil have detaljerne åbnet i starten, kan du tilføje en klasse åben i detaljeringselementet.

Konklusion

Vi har gennemgået alle trin for at oprette en enkelt produktside ved hjælp af HTML5, fejlsøgning for ikke-understøttede browsere samt replikere skifteffekten til detaljeelementet alene, så forhåbentlig kan du lære meget af det.

Jeg er dog klar over, at jeg ikke har forklaret alt i detaljer i dette indlæg, så hvis du vil rydde noget op, er du velkommen til at skrive spørgsmålet i kommentarfeltet nedenfor.