Hjemmeside » Coding » HTML5 Tutorial Hvordan bygge en enkelt produktside
HTML5 Tutorial Hvordan bygge en enkelt produktside
Denne artikkelen er en del av vår "HTML5 / CSS3 opplæringsserie" - dedikert til å gjøre deg til en bedre designer og / eller utvikler. Klikk her å se flere artikler fra samme serie.
I dette innlegget skal vi jobbe med et fiktivt prosjekt, og skape en enkelt produktside for å tilby iPhone 4S, og i dette prosjektet skal vi også implementere metodene som vi har diskutert i de forrige innleggene. de element og negasjonsvelgeren.
La oss komme i gang.
HTML5 Markup
Først må vi opprette en html dokument med følgende oppskrift:
Apple iPhone 4 - 16GB
Den mest fantastiske iPhone ennå.
Den raskere dual-core A5-brikken. 8MP kameraet med helt ny optikk skaper også 1080p HD-video. Og introdusere Siri. Det er den mest fantastiske iPhone ennå.
Produktfunksjoner
8 megapikselkamera med full 1080p videoopptak
Siri stemme assitant
iCloud
Lufttrykk
Retina skjerm
Foto og video geotagging
Vi bruker flere nye koder fra HTML5 spec., Som Overskrift, hgroup, figur, seksjon, og en vi har diskutert før; de detaljer og sammendrag stikkord.
Vi kommer imidlertid ikke til å grave inn i disse kodene, ikke fordi vi ikke er villige til, men snarere disse er grunnleggende emner som du lett kan finne andre steder. Så, hvis du er veldig ny på HTML5, vil jeg anbefale at du leser følgende referanser av disse kodene; de har forklart dem grundig:
La oss snakke om semantisk
HTML5-headerelementet
Hgroup-elementet
HTML5-tagreferanse
La oss nå se vår første utseende.
Vel, det ser fornuftig ut uten noen stiler. Øverst er det overskriften, og deretter kommer delen for bildet, beskrivelsen og til slutt 'Kjøp nå' -knappen. La oss nå legge til denne siden.
Stilene
Vi starter med å normalisere alle standardstilene ved hjelp av denne stilarket og legge til en gradientbakgrunn til html stikkord.
Husk at våre produktelementer er pakket inn i en div med produktklassen. Så, her ønsker vi å sentrere wrappen og sette bredden til å være om 650 piksler.
.wrapper bredde: 650px; margin: auto; polstring: 25px 0px;
Overskriftsdelen
I overskriftsdelen har vi to overskrifter h1 og h4, så la oss style disse elementene.
Som vanlig forårsaker IE (Internet Explorer) alltid noen problemer; Hvis du åpner dette i en hvilken som helst IE lavere enn 9, forblir siden un-styled.
Dette skyldes at Internet Explorer ikke gjenkjenner de nye elementene (seksjon, Overskrift, etc.), slik at stilene som vi har angitt, ikke passer. Dermed vil vi i neste trinn arbeide med å løse dette problemet.
Testing av nettleserstøtte
I vårt forrige innlegg har vi taklet nettleserstøtten for detaljerelementet ved hjelp av denne polyfillet; slik at det kan fungere i de støttede nettleserne. Men denne gangen vil vi prøve forskjellige måter å gjøre det på med Modernizr.
Fra sitt offisielle nettsted, "Modernizr er et open-source JavaScript-bibliotek som hjelper deg med å bygge neste generasjon av HTML5 og CSS3-drevne nettsteder". Teknisk vil Modernizr teste nettleserens støtte for visse nye elementer og funksjoner. Hvis støtte ikke er oppgitt, må vi gi en tilbakebetaling om den er ved å gi forskjellige stiler eller tilby polyfills. I dette tilfellet vil vi bruke Modernizr for å hjelpe oss med å teste detaljer og oppsummeringselement.
Gå til Modernizr og fortsett til nedlastingssiden.
På nedlastingssiden gir Modernizr noen muligheter til å konfigurere biblioteket, så du må bare velge bestemte funksjoner du virkelig trenger for nettstedet ditt. I dette tilfellet trenger vi:
HTML5Shiv 3.4
Legg til CSS-klasser, Denne funksjonen vil automatisk sette inn klasser i HTML-taggen.
de Modernizr.load,
gå til fellesskapet tilleggs-boksen og velg ELEM-detaljer,
I delen Utvidelser velger du Modernizr.addTest.
Generer og last ned filen.
Koble den til html og last siden på nytt i Internet Explorer. Siden skulle nå blitt stylet siden Internet Explorer nå kan gjenkjenne kodene.
Og hvis du ser kilden eller inspiseringselementet, finner du klassen ingen detaljer som er lagt inn i HTML-taggen; som indikerer at nettleseren der vi forhåndsviser siden; er for tiden ikke støtte detaljer element. @@@@ [Jeg kan ikke forstå denne setningen. ]
Vi kan da opprette en tilbakebetaling ved hjelp av denne klassen som kroken, som vi skal gjøre i neste trinn.
The Fallback
I dette trinnet vil vi gi lignende detaljer elementfunksjonalitet for andre nettlesere (unntatt Chrome). I forrige innlegg ble dette trinnet gjort automatisk ved hjelp av dette skriptet, men denne gangen vil vi lage det på egen hånd.
Merk: Bare gjennomgå litt fra vårt forrige innlegg; Detaljerelementet støttes for tiden bare i Chrome-nettleseren.
Så, la oss begynne å jobbe med CSS først.
På oppsummeringsmerket endrer vi markørmodus til pekeren, så brukeren vil legge merke til at den er klikkbar.
Å gi flere mellomrom på toppen og bunnen av detaljelementet med en margin.
detaljer margin: 20px 0px;
Som standard vil sammendragskoden ha en pil. Men her ønsker vi å erstatte det med et plus-minus-ikon.
Merk: Før jeg har lastet ned, har jeg tidligere lastet ned ikonene fra denne samlingen av Fugue, last ned og sprit dem til en fil.
La oss legge til et tidligere pseudo-element og feste ikonet som bakgrunn. Legg merke til at på dette punktet er bakgrunnsposisjonen øverst som viser plussymbolet.
Standard pilen er nå erstattet med vårt ikon, og hvis du ser det i Chrome, har du allerede en veksleffekt når du klikker på den; ikonet endres tilsvarende. Men i andre nettlesere vil ingenting skje fremdeles. Så i neste trinn vil vi prøve å replikere effekten med jQuery.
Toggle-effekten med jQuery
Før vi begynner med jQuery-delen, vil jeg gjerne takke Ian Devlin for inspirasjonen. Skriptet nedenfor er faktisk en liten modifikasjon av hans.
Ok, la oss opprette en variabel for å lagre sammendragskoden.
var sammendrag = $ ('detaljer sammendrag');
Så pakker vi alle søskenelementene i sammendraget med en div.
summary.siblings (). wrapAll ('');
Og gjem det som div når detaljelementet ikke har åpen klasse.
$ ('detaljer: ikke (.open) sammendrag'). søsken ('div'). skjul ();
Når sammendraget er klikket, vil vi ha den skjulte diven som skal vises, og motsatt, når diven er i utgangspunktet åpen, ville den være skjult.
La oss nå teste det i nettleseren; Toggle-effekten skulle nå ha jobbet på alle nettlesere, jeg personlig har sjekket (til Internet Explorer 7).
Demo
Last ned kilde
Tips: Alternativt kan du endre .veksle() med .slideToggle () for å lage en lysbildeffekt. Også hvis du vil at detaljene skal åpnes i utgangspunktet, kan du legge til en klasse åpen i detaljelementet.
Konklusjon
Vi har gjennomgått alle trinnene med å opprette en enkelt produktside ved hjelp av HTML5, feilsøking for ikke støttede nettlesere, samt replikere bytteeffekten for detaljelementet på egenhånd, så forhåpentligvis kan du lære mye av det.
Imidlertid er jeg klar over at jeg ikke forklarte alt i detalj i dette innlegget, så hvis du vil fjerne noe, kan du legge inn spørsmålet i kommentarfeltet nedenfor.
