Startpagina » Coding » HTML5 zelfstudie Hoe een enkele productpagina te maken
HTML5 zelfstudie Hoe een enkele productpagina te maken
Dit artikel maakt deel uit van ons "HTML5 / CSS3 Tutorials-serie" - toegewijd om u een betere ontwerper en / of ontwikkelaar te maken. Klik hier om meer artikelen uit dezelfde serie te zien.
In deze post gaan we werken aan een fictief project, een enkele productpagina maken om iPhone 4S aan te bieden, en in dit project gaan we ook de methoden implementeren die we in de vorige berichten hebben besproken; de element en de negatieselector.
Laten we beginnen.
De HTML5-markering
Eerst moeten we een maken html document met de volgende markup:
Apple iPhone 4 - 16 GB
De meest verbazingwekkende iPhone tot nu toe.
De snellere dual-core A5-chip. De 8MP-camera met volledig nieuwe optica maakt ook 1080p HD-video. En het introduceren van Siri. Het is de meest verbazingwekkende iPhone tot nu toe.
Producteigenschappen
8 megapixelcamera met volledige 1080p video-opname
Siri stemassistent
iCloud
Air Print
Retina-display
Foto- en video-geotagging
We gebruiken verschillende nieuwe tags van HTML5 spec., Zoals de hoofd, hgroup, figuur, sectie, en een die we eerder hebben besproken; de gegevens en samenvatting label.
We gaan echter niet in op deze tags, niet omdat we dat niet willen, maar eerder zijn dit basisonderwerpen die je elders gemakkelijk kunt vinden. Dus, als u echt nieuw bent in HTML5, zou ik u aanraden de volgende referenties van die tags te lezen; ze hebben ze uitvoerig uitgelegd:
Laten we het hebben over Semantic
Het HTML5-headerelement
Het hgroup-element
HTML5-tagreferentie
Laten we nu eens kijken naar de eerste verschijning van onze pagina.
Nou, het ziet er redelijk uit zonder stijlen. Helemaal bovenaan staat de koptekst en dan komt het gedeelte voor de afbeelding, beschrijving en tenslotte de knop 'Nu kopen'. Laten we nu deze pagina opfleuren.
De stijlen
We beginnen met het normaliseren van alle standaardstijlen met behulp van dit stijlblad en een verloopachtergrond toevoegen aan de html label.
Vergeet niet dat onze productelementen allemaal verpakt zijn in een div met de productklasse. Dus hier willen we de wrapper centreren en instellen dat de breedte ongeveer is 650 pixels.
.wrapper width: 650px; marge: automatisch; opvulling: 25px 0px;
Het kopgedeelte
In het kopgedeelte hebben we twee titels h1 en h4, dus laten we deze elementen stijlen.
Zoals gewoonlijk veroorzaakt IE (Internet Explorer) altijd wat problemen; als u dit opent in een IE lager dan 9, blijft de pagina niet-gestileerd.
Dit komt omdat Internet Explorer de nieuwe elementen niet herkent (sectie, hoofd, enz.) zodat de stijlen die we hebben opgegeven, niet konden worden toegepast. Dus, in de volgende stap zullen we werken aan het oplossen van dit probleem.
Browserondersteuning testen
In onze vorige post hebben we de browserondersteuning voor het detailselement met behulp van deze polyfill aangepakt; zodat het zou kunnen werken in de niet-ondersteunde browsers. Maar deze keer zullen we verschillende manieren proberen om het met Modernizr te doen.
Van de officiële website, "Modernizr is een open-source JavaScript-bibliotheek waarmee u de volgende generatie kunt bouwen HTML5 en CSS3-aangedreven websites". Technisch zal Modernizr de browserondersteuning testen voor bepaalde nieuwe elementen en functies. Als er geen ondersteuning wordt geboden, moeten we een terugval bieden, of dit nu is door verschillende stijlen te geven of te bieden polyfills. In dit geval zullen we Modernizr gebruiken om ons te helpen de details en het samenvattingselement te testen.
Ga naar Modernizr en ga naar de downloadpagina.
Op de downloadpagina biedt Modernizr enkele opties om de bibliotheek te configureren, zodat u alleen bepaalde functies hoeft te selecteren die u echt nodig hebt voor uw website. In dit geval hebben we nodig:
HTML5Shiv 3.4
CSS-klassen toevoegen, deze functie voegt automatisch klassen in de html-tag in.
de Modernizr.load,
ga naar het community-add-onsvak en selecteer elem-gegevens,
Selecteer in het gedeelte Uitbreidbaarheid Modernizr.addTest.
Genereer en download het bestand.
Koppel hem aan je html en laad de pagina opnieuw in Internet Explorer. De pagina zou nu gestyled moeten zijn omdat Internet Explorer nu de tags kan herkennen.
En als u het bron- of inspectie-element bekijkt, ziet u dat de klasse met geen details in de html-tag is ingevoegd; geeft aan dat de browser waar we een voorbeeld van de pagina bekijken; ondersteunt momenteel geen detailelement. @@@@ [Ik begrijp deze zin niet. ]
We kunnen dan een fallback maken met deze klasse als haak, die we in de volgende stap zullen doen.
De fallback
In deze stap zullen we vergelijkbare bieden gegevens elementfunctionaliteit voor andere browsers (exclusief Chrome). In het vorige bericht is deze stap automatisch uitgevoerd met dit script, maar deze keer zullen we het zelf maken.
Notitie: Even een beetje terugkijken van onze vorige post; het detailselement wordt momenteel alleen ondersteund in de Chrome-browser.
Laten we dus eerst aan de CSS gaan werken.
Op de samenvattingstag wijzigen we de cursormodus in aanwijzer, zodat de gebruiker merkt dat deze kan worden aangeklikt.
Om meer spaties aan de boven- en onderkant van het detailselement te geven met een marge.
details margin: 20px 0px;
Standaard krijgt de samenvattingstag een pijl. Maar hier willen we het vervangen door een plusminuspictogram.
Notitie: Alvorens verder te gaan, heb ik eerder al de iconen uit deze collectie gedownload door Fuga, download en sprite ze in één bestand.
Laten we een vóór pseudo-element toevoegen en het pictogram als achtergrond toevoegen. Merk op dat op dit punt de achtergrondpositie bovenaan staat, die het plus-pictogram zal tonen.
Laten we het resultaat dan even in een browser bekijken.
De standaardpijl is nu vervangen door ons pictogram en als u deze in Chrome ziet, heeft u al een wisseleffect wanneer u erop klikt; het pictogram zal overeenkomstig veranderen. Maar in andere browsers zal er niets gebeuren. Dus, in de volgende stap zullen we proberen het effect te repliceren met jQuery.
Het toggle-effect met jQuery
Voordat we beginnen met het jQuery-gedeelte, wil ik Ian Devlin bedanken voor de inspiratie, het onderstaande script is eigenlijk een kleine wijziging van zijn.
Oké, laten we een variabele maken om de samenvattingstag op te slaan.
var summary = $ ('samenvatting details');
Vervolgens pakken we alle elementen uit de samenvatting van de broer in met een div.
summary.siblings (). wrapAll ('');
En verberg die div wanneer het element details niet de open klasse heeft.
$ ('details: niet (.open) samenvatting'). broers en zussen ('div'). hide ();
Wanneer er op de samenvatting wordt geklikt, willen we dat de verborgen div wordt weergegeven en omgekeerd, wanneer de div in eerste instantie open is, zou deze verborgen zijn.
Om ervoor te zorgen dat die functies alleen in de niet-ondersteunde browsers worden uitgevoerd, verpakken we ze in deze voorwaardelijke verklaring.
if ($ ('html'). hasClass ('geen details')) // de code komt hier
En hieronder is de code die we hebben:
if ($ ('html'). hasClass ('no-details')) var summary = $ ('details summary'); summary.siblings (). wrapAll (''); $ ('details: niet (.open) samenvatting'). broers en zussen ('div'). hide (); summary.click (function () $ (this) .siblings ('div'). toggle (); $ ('details'). toggleClass ('open'););
Laten we het nu testen in de browser; het toggle-effect had nu in alle browsers moeten werken, ik heb persoonlijk gecontroleerd (tot Internet Explorer 7).
demonstratie
Download de bron
Tips: Als alternatief kunt u de .knevel () met .slideToggle () om een dia-effect te maken. Ook als u wilt dat de details aanvankelijk worden geopend, kunt u een klasse toevoegen die is geopend in het detailselement.
Conclusie
We hebben alle stappen doorlopen van het maken van een enkele productpagina met behulp van HTML5, foutopsporing voor niet-ondersteunde browsers en repliceren van het schakelelement voor details in ons eentje, dus hopelijk kunt u er veel van leren.
Ik ben me er echter van bewust dat ik niet alles in detail in dit bericht heb uitgelegd, dus als je iets wilt opruimen, kun je de vraag stellen in het vak hieronder..
