Hemsida » Kodning » HTML5 Tutorial Så här bygger du en enda produktsida
HTML5 Tutorial Så här bygger du en enda produktsida
Denna artikel är en del av vår "HTML5 / CSS3 Tutorials-serien" - dedikerad till att göra dig till en bättre designer och / eller utvecklare. Klicka här att se fler artiklar från samma serie.
I det här inlägget kommer vi att arbeta på ett fiktivt projekt, skapa en enda produktsida för att erbjuda iPhone 4S, och i det här projektet kommer vi också att genomföra de metoder som vi har diskuterat i tidigare inlägg. de element och negationsväljaren.
Låt oss börja.
HTML5 Markup
Först måste vi skapa en html dokument med följande markering:
Apple iPhone 4 - 16GB
Den mest fantastiska iPhone än.
Den snabbare dubbelkärnans A5-chip. 8MP-kameran med helt ny optik skottar också 1080p HD-video. Och introducera Siri. Det är den mest fantastiska iPhone än.
Produktfunktioner
8 megapixelkamera med full 1080p videoinspelning
Siri Voice Assitant
icloud
Lufttryck
Retina-skärm
Foto och video geotagging
Vi använder flera nya taggar från HTML5 spec., Som rubrik, hgroup, figur, sektion, och en vi har diskuterat förut de detaljer och sammanfattning märka.
Vi kommer emellertid inte att gräva in i dessa taggar, inte för att vi inte är villiga att, men snarare är dessa grundläggande ämnen som du lätt kan hitta någon annanstans. Så, om du är riktigt ny på HTML5, rekommenderar jag att du läser följande referenser av dessa taggar; de har förklarat dem fullständigt:
Låt oss prata om semantisk
HTML5 Header Element
Hgroup-elementet
HTML5-tagreferens
Låt oss nu se vår första utseende.
Tja, det ser förnuftigt ut utan några stilar. Högst upp finns rubriken, och sedan kommer avsnittet för bilden, beskrivningen och slutligen knappen "Köp nu". Nu, låt oss sätta upp denna sida.
Stilarna
Vi kommer att börja med att normalisera alla standardstilar med hjälp av det här stilarket och lägga till en gradientbakgrund till html märka.
Kom ihåg att våra produktelement är inslagna i en div med produktklassen. Så här vill vi centrera omslaget och ställa in bredden som ska handla om 650 px.
.wrapper width: 650px; marginal: auto; vaddering: 25px 0px;
Rubrikavsnittet
I rubrikavsnittet har vi två rubriker h1 och h4, så låt oss utforma dessa element.
Som vanligt orsakar IE (Internet Explorer) alltid några problem; om du öppnar detta i någon IE lägre än 9, kommer sidan att förbli oförändrad.
Detta beror på att Internet Explorer inte känner igen de nya elementen (sektion, rubrik, etc.) så de stilar som vi har angett misslyckas med att gälla. Således kommer vi i nästa steg att arbeta för att lösa detta problem.
Testa webbläsarsupport
I vårt tidigare inlägg har vi tackat webbläsarsupporten för detaljeringselementet med denna polyfil; så att det kan fungera i de icke-stödda webbläsarna. Men den här gången kommer vi att försöka olika sätt att göra det med Modernizr.
Från dess officiella hemsida, "Modernizr är ett JavaScript-bibliotek med öppen källkod som hjälper dig att bygga nästa generation av HTML5 och CSS3-powered webbplatser". Tekniskt kommer Modernizr att testa webbläsarsupporten för vissa nya element och funktioner. Om stöd inte tillhandahålls måste vi sedan ge en återgång om det är genom att ge olika stilar eller tillhandahålla polyfills. I det här fallet kommer vi att använda Modernizr för att hjälpa oss att testa detaljerna och sammanfattningselementet.
Gå till Modernizr och fortsätt till dess nedladdningssida.
På nedladdningssidan ger Modernizr några alternativ att konfigurera biblioteket, så du behöver bara välja vissa funktioner du verkligen behöver för din webbplats. I det här fallet behöver vi:
HTML5Shiv 3.4
Lägg till CSS-klasser, Den här funktionen lägger automatiskt in klasser i HTML-taggen.
de Modernizr.load,
Gå till community add-ons-rutan och välj ELEM-detaljer,
I avsnittet Extensibility väljer du Modernizr.addTest.
Generera och hämta filen.
Länk den till din html och ladda om sidan i Internet Explorer. Sidan ska nu ha stylats, eftersom Internet Explorer nu kan känna igen taggarna.
Och om du tittar på käll- eller inspektionselementet hittar du klassen nr detaljer som har infogats i HTML-taggen. vilket indikerar att webbläsaren där vi förhandsgranskar sidan stöder för närvarande inte detaljeringselement. @@@@ [Jag kan inte förstå denna mening. ]
Vi kan sedan skapa en nedgång med denna klass som kroken, som vi kommer att göra i nästa steg.
Fallbacken
I detta steg kommer vi att ge liknande detaljer elementfunktionalitet för andra webbläsare (exklusive Chrome). I det föregående inlägget utfördes detta steg automatiskt med hjälp av det här skriptet, men den här gången kommer vi att skapa det på egen hand.
Notera: Granska bara lite från vårt tidigare inlägg. detaljeringselementet stöds för närvarande endast i Chrome-webbläsaren.
Så, låt oss börja arbeta på CSS först.
På sammanfattnings-taggen ändrar vi markörläget till pekaren, så användaren kommer att märka att den är klickbar.
För att ge fler mellanslag på toppen och botten av detaljerelementet med en marginal.
detaljer margin: 20px 0px;
Som standard kommer sammandragstaggen att ha en pil. Men här vill vi ersätta det med en plus-minusikonen.
Notera: Innan jag fortsätter har jag tidigare laddat ner ikonerna från denna samling av Fugue, ladda ner och sprida dem i en fil.
Låt oss lägga till ett tidigare pseudo-element och bifoga ikonen som bakgrund. Observera att bakgrundspositionen vid den här tiden är högst upp som visar plusikonen.
Låt oss sedan se resultatet i en webbläsare ett tag.
Standardpilen har nu ersatts med vår ikon, och om du ser den i Chrome har du redan en växelverkan när du klickar på den. ikonen kommer att ändras i enlighet med detta. Men i andra webbläsare kommer ingenting att hända ännu. Så, i nästa steg försöker vi replikera effekten med jQuery.
Växelverkan med jQuery
Innan vi börjar med jQuery-delen, vill jag tacka Ian Devlin för inspirationen. Skriptet nedan är faktiskt en liten modifikation av hans.
Okej, låt oss skapa en variabel för att lagra sammandragstaggen.
var sammanfattning = $ ('detaljerad sammanfattning');
Sedan sätter vi samman alla syskonelement i sammanfattningen med en div.
summary.siblings (). wrapAll ('');
Och göm det där div när detaljeringselementet inte har den öppna klassen.
$ ('detaljer: inte (.öppen) sammanfattning'). syskon ('div'). hide ();
När sammanfattningen klickas vill vi att den dolda diven ska visas, och motsatsen, när diven är ursprungligen öppen, skulle den vara gömd.
Nu ska vi testa det i webbläsaren; växelverkan borde ha fungerat på alla webbläsare som jag personligen har kontrollerat (till Internet Explorer 7).
demo
Hämta källa
tips: Alternativt kan du ändra .toggle () med .slideToggle () för att skapa en bild-effekt. Också om du vill att detaljerna ska öppnas inledningsvis kan du lägga till en klass som är öppen i detaljeringselementet.
Slutsats
Vi har gått igenom alla steg för att skapa en enda produktsida med hjälp av HTML5, felsökning för icke-stödda webbläsare, samt att replikera växelverkan för detaljeringselement på egen hand, så förhoppningsvis kan du lära dig mycket av det.
Jag är dock medveten om att jag inte förklarade allt i detalj i det här inlägget, så om du vill rensa upp något, kan du skicka frågan i kommentarfältet nedan.
