Lass uns anfangen.

Das HTML5-Markup

Zuerst müssen wir ein erstellen html Dokument mit dem folgenden Markup:

 
 
 
 
Apple iPhone 4 - 16 GB
 
Das erstaunlichste iPhone bisher.
 
 
 
  
 
 
Der schnellere Dual-Core-A5-Chip. Die 8-Megapixel-Kamera mit völlig neuer Optik nimmt auch 1080p HD-Videos auf. Und Siri vorstellen. Es ist das bisher erstaunlichste iPhone.
 
 
Produktmerkmale
 
 
8-Megapixel-Kamera mit voller 1080p-Videoaufnahme
 
Siri Sprachassistent
 
iCloud
 
Luftdruck
 
Retina Display
 
Foto- und Video-Geotagging
 
 
 Kaufe jetzt 
 
 

Wir verwenden mehrere neue Tags aus der HTML5-Spezifikation Header, hgroup, Zahl, Sektion, und eine, die wir vorher besprochen haben; das Einzelheiten und Zusammenfassung Etikett.

Wir werden uns jedoch nicht mit diesen Tags befassen, nicht weil wir es nicht wollen, sondern es handelt sich hierbei um grundlegende Themen, die Sie leicht an anderer Stelle finden können. Wenn Sie also wirklich neu in HTML5 sind, würde ich Ihnen empfehlen, die folgenden Referenzen dieser Tags zu lesen. Sie haben sie ausführlich erklärt:

• Lassen Sie uns über Semantik sprechen
• Das HTML5-Header-Element
• Das hgroup Element
• HTML5-Tagreferenz

Nun sehen wir uns den ersten Auftritt unserer Seite an.

Nun, es sieht ohne Stil sinnvoll aus. Ganz oben befindet sich die Kopfzeile und dann der Abschnitt für das Bild, die Beschreibung und schließlich die Schaltfläche "Jetzt kaufen". Jetzt lasst uns diese Seite aufmischen.

Die Stile

Wir beginnen damit, alle Standardstile mit diesem Stylesheet zu normalisieren und dem Hintergrund einen Farbverlaufshintergrund hinzuzufügen html Etikett.

 html Höhe: 100%; Hintergrund: # f3f3f3; Hintergrund: -moz-linearer Gradient (oben, # f3f3f3 0%, #ffffff 50%); Hintergrund: -webkit-gradient (linear, links oben, links unten, Farbstopp (0%, # f3f3f3), Farbstopp (50%, # ffffff)); Hintergrund: -webkit-linearer Gradient (oben, # f3f3f3 0%, # ffffff 50%); Hintergrund: -o-linearer Gradient (oben, # f3f3f3 0%, # ffffff 50%); Hintergrund: -ms-linearer Gradient (oben, # f3f3f3 0%, # ffffff 50%); Hintergrund: linearer Gradient (oben, # f3f3f3 0%, # ffffff 50%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3", endColorstr = "# ffffff", GradientType = 0); 

Denken Sie daran, dass unsere Produktelemente alle in ein div mit der Produktklasse. Hier möchten wir den Wrapper zentrieren und die Breite auf ungefähr einstellen 650px.

 .Wrapper Breite: 650px; Marge: auto; Polsterung: 25px 0px; 

Der Kopfabschnitt

Im Kopfbereich haben wir zwei Überschriften h1 und h4, also lassen Sie uns diese Elemente gestalten.

 h1, h4 Schriftfamilie: Helvetica Neue, Arial, serifenlos; Schriftgewicht: normal; Marge: 0;  h1 font-size: 24pt;  h4 font-size: 16pt; Farbe: #aaa; 

Und dann füge ein wenig Platz am unteren Rand des hinzu Header mit einem Rand.

 Kopfzeile Rand unten: 20px; 

Wenn Sie sich die ganz rechte Seite der Kopfzeile ansehen, würde auf dieser Seite viel Leerzeichen sein.

Warum setzen wir nicht auch das Apple-Logo dort ein.

 Kopfzeile Rand unten: 20px; Hintergrund: URL ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png') Keine Wiederholung der rechten Mitte; 

Das Produktbild

Schwenken Sie als Nächstes das Bild nach links und stellen Sie die maximale Bildbreite auf 350px.

 Figur Float: Links;  Abbildung img max-width: 350px; 

Da das Bild nach links verschoben wurde, verschieben wir den Beschreibungsabschnitt nach rechts und setzen die Breite auf 300px.

 Abschnitt Schriftfamilie: Tahoma, Arial, Serifenlose; Zeilenhöhe: 150%; schweben rechts; Breite: 300px; Farbe: # 333; 

Nun wollen wir das Ergebnis bis jetzt sehen.

Es sieht gut aus, aber das Details-Tag funktioniert immer noch nicht (außer in Chrome). Deswegen wollen wir die Schaltfläche als nächstes gestalten.

Die Taste

Bei den Schaltflächenstilen ahmen wir die vom Apple.com Store nach. Und hier ist die gesamte Syntax, die Sie in Ihr Stylesheet für die Schaltfläche einfügen müssen.

 Schaltfläche Hintergrund: # 36a9ea; Hintergrund: -moz-linearer Gradient (oben, # 36a9ea 0%, # 127fd2 100%); Hintergrund: -webkit-gradient (linear, links oben, links unten, Farbstopp (0%, # 36a9ea), Farbstopp (100%, # 127fd2)); Hintergrund: -webkit-linearer Gradient (oben, # 36a9ea 0%, # 127fd2 100%); Hintergrund: -o-linearer Gradient (oben, # 36a9ea 0%, # 127fd2 100%); Hintergrund: -ms-linearer Gradient (oben, # 36a9ea 0%, # 127fd2 100%); Hintergrund: linearer Gradient (oben, # 36a9ea 0%, # 127fd2 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 36a9ea", endColorstr = "# 127fd2", GradientType = 0); Rand: 1px fest # 00599d; Farbe: #fff; Polsterung: 8px 20px; -webkit-border-radius: 3px; Grenzradius: 3px; -webkit-box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), eingesetzter 0px 1px 0px 0px rgba (250, 250, 250, .3); Box-Schatten: 0px 1px 1px 0px rgba (0, 0, 0, .1), eingesetzter 0px 1px 0px 0px rgba (250, 250, 250, .3); Text-Schatten: 0px 1px 1px # 156cc4; filter: dropshadow (color = # 156cc4, offx = 0, offy = 1); Schriftgröße: 10pt;  Taste: hover Hintergrund: # 2f90d5; Hintergrund: -moz-linearer Gradient (oben, # 2f90d5 0%, # 0351b7 100%); Hintergrund: -webkit-gradient (linear, links oben, links unten, Farbstopp (0%, # 2f90d5), Farbstopp (100%, # 0351b7)); Hintergrund: -webkit-linearer Gradient (oben, # 2f90d5 0%, # 0351b7 100%); Hintergrund: -o-linearer Gradient (oben, # 2f90d5 0%, # 0351b7 100%); Hintergrund: -ms-linearer Gradient (oben, # 2f90d5 0%, # 0351b7 100%); Hintergrund: linearer Gradient (oben, # 2f90d5 0%, # 0351b7 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 2f90d5", endColorstr = "# 0351b7", GradientType = 0);  Taste: aktiv Hintergrund: # 127fd2; -webkit-box-shadow: Einfügung von 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); Box-Schatten: Einfügung 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); 

Jetzt sollte der Button besser aussehen.

Problem im Internet Explorer

Wie üblich verursacht der Internet Explorer (IE) immer Probleme. Wenn Sie dies in einem IE unter 9 öffnen, bleibt die Seite ohne Stil.

Dies liegt daran, dass Internet Explorer die neuen Elemente nicht erkennt (Sektion, Header, usw.), so dass die von uns angegebenen Stile nicht zutreffen. Daher werden wir im nächsten Schritt daran arbeiten, dieses Problem zu lösen.

Browser-Unterstützung testen

In unserem vorherigen Beitrag haben wir die Browserunterstützung für das Details-Element mit dieser Polyfill-Lösung in Angriff genommen. damit es in den nicht unterstützten Browsern funktionieren könnte. Dieses Mal werden wir jedoch mit Modernizr verschiedene Methoden ausprobieren.

Von seiner offiziellen Website, "Modernizr ist eine Open-Source-JavaScript-Bibliothek, mit der Sie die nächste Generation von erstellen können HTML5 und CSS3-betriebene Websites". Technisch wird Modernizr die Browserunterstützung für bestimmte neue Elemente und Funktionen testen. Wenn kein Support bereitgestellt wird, müssen wir einen Fallback bereitstellen, indem unterschiedliche Stile angegeben oder bereitgestellt werden Polyfills. In diesem Fall verwenden wir Modernizr, um die Details und das Zusammenfassungselement zu testen.

1. Gehen Sie zu Modernizr und fahren Sie mit der Download-Seite fort.

2. Auf der Download-Seite bietet Modernizr einige Optionen zum Konfigurieren der Bibliothek, sodass Sie nur bestimmte Funktionen auswählen müssen, die Sie wirklich für Ihre Website benötigen. In diesem Fall brauchen wir:

   • HTML5Shiv 3.4
   • CSS-Klassen hinzufügen, Diese Funktion fügt automatisch Klassen in das HTML-Tag ein.
   • das Modernizr.load,
   • Gehen Sie zum Community-Add-On-Feld und wählen Sie elem-details,
   • Wählen Sie im Abschnitt Erweiterbarkeit Modernizr.addTest.
3. Generieren Sie die Datei und laden Sie sie herunter.
4. Verknüpfen Sie sie mit Ihrer HTML-Datei und laden Sie die Seite erneut in Internet Explorer. Die Seite sollte jetzt gestaltet worden sein, da Internet Explorer die Tags jetzt erkennen kann.

Wenn Sie das Quell- oder Inspektionselement anzeigen, werden Sie feststellen, dass die Klasse no-details in das html-Tag eingefügt wurde. Anzeigen, dass der Browser die Seite in der Vorschau anzeigt; unterstützt derzeit kein Detailelement. [Ich kann diesen Satz nicht verstehen. ]

Wir können dann einen Fallback erstellen, indem wir diese Klasse als Hook verwenden, was wir im nächsten Schritt tun werden.

Der Fallback

In diesem Schritt werden wir ähnlich anbieten Einzelheiten Elementfunktionalität für andere Browser (außer Chrome). Im vorherigen Beitrag wurde dieser Schritt automatisch mit diesem Skript ausgeführt. Dieses Mal werden wir es jedoch selbst erstellen.

Hinweis: Ich habe nur ein wenig aus unserem vorherigen Post gelesen. Das Element details wird derzeit nur vom Chrome-Browser unterstützt.

Beginnen wir also mit der Arbeit am CSS.

Beim Zusammenfassungs-Tag ändern wir den Cursor-Modus in Zeiger, sodass der Benutzer feststellen kann, dass er anklickbar ist.

 Zusammenfassung Cursor: Zeiger; Schriftgröße: 12pt; Umriss: 0; 

Um mehr Leerzeichen am oberen und unteren Rand des Details-Elements mit einem Rand zu erhalten.

 Details Marge: 20px 0px; 

Standardmäßig enthält das Summary-Tag einen Pfeil. Hier möchten wir es jedoch durch ein Plus-Minus-Symbol ersetzen.

Hinweis: Bevor ich fortfahre, habe ich zuvor die Icons aus dieser Sammlung von Fugue heruntergeladen, heruntergeladen und in eine Datei gespritzt.

Fügen wir ein Pseudo-Element vor und fügen Sie das Symbol als Hintergrund ein. Beachten Sie, dass sich zu diesem Zeitpunkt die Hintergrundposition oben befindet und das Plus-Symbol angezeigt wird.

 Details> Zusammenfassung: Vorher Breite: 16px; Höhe: 16px; Anzeige: Inline-Block; Inhalt: "! wichtig; Hintergrund: URL ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') Keine Wiederholung der Mitte oben; Rand rechts: 5px; Position: relativ; oben: 2px;

Wenn das Detailelement geöffnet ist, wird die Hintergrundposition nach unten verschoben, wodurch das Minus-Symbol angezeigt wird.

 Details [Öffnen]> Zusammenfassung: Vorher, Details.Open> Zusammenfassung: Vorher Hintergrund: URL ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png' ) keine Wiederholung des Mittelbodens; 

Das [öffnen] Zeichen ist ein Selektor. In diesem Fall wird das Attribut "Details offen" im unterstützenden Browser ausgewählt.

Zuletzt sollten wir den Pfeil ausblenden, der standardmäßig in Chrome angezeigt wird.

 Details> Übersicht :: - Webkit-Details-Marker Anzeige: keine; 

Dann lassen Sie uns das Ergebnis eine Zeit lang in einem Browser sehen.

Der Standardpfeil wurde jetzt durch unser Symbol ersetzt. Wenn Sie ihn in Chrome sehen, haben Sie bereits einen Umschalteffekt, wenn Sie darauf klicken. Das Symbol ändert sich entsprechend. In anderen Browsern wird jedoch noch nichts passieren. Im nächsten Schritt versuchen wir also, den Effekt mit jQuery zu replizieren.

Der Umschalteffekt mit jQuery

Bevor wir mit dem jQuery-Teil beginnen, möchte ich mich bei Ian Devlin für die Inspiration bedanken. Das folgende Skript ist eine geringfügige Modifikation von ihm.

In Ordnung, erstellen wir eine Variable, um das Summary-Tag zu speichern.

 var summary = $ ('details summary'); 

Dann verpacken wir alle Geschwisterelemente der Zusammenfassung mit einem div.

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

Und blenden Sie dieses div aus, wenn das details-Element nicht die offene Klasse hat.

$ ('details: nicht (.open) - Zusammenfassung'). Geschwister ('div'). hide ();

Wenn auf die Zusammenfassung geklickt wird, soll das ausgeblendete Div angezeigt werden. Wenn das Div anfangs geöffnet ist, wird es ausgeblendet.

 summary.click (function () $ (this) .siblings ('div'). toggle (); $ ('details'). toggleClass ('open');); 

Um sicherzustellen, dass diese Funktionen nur in den nicht unterstützten Browsern ausgeführt werden, packen wir sie in diese bedingte Anweisung.

 if ($ ('html'). hasClass ('no-details')) // der Code geht hier hin

Und unten ist der Code, den wir haben:

 if ($ ('html'). hasClass ('no-details')) var summary = $ ('details summary'); summary.siblings (). wrapAll ('
'); $ ('details: nicht (.open) - Zusammenfassung'). Geschwister ('div'). hide (); summary.click (function () $ (this) .siblings ('div'). toggle (); $ ('details'). toggleClass ('open');); 

Jetzt testen wir es im Browser. der Toggle-Effekt sollte jetzt bei allen Browsern funktionieren, habe ich persönlich geprüft (bis Internet Explorer 7).

• Demo
• Quelle herunterladen

Tipps: Alternativ können Sie das ändern .Umschalten() mit .slideToggle () einen Folieneffekt erzeugen. Wenn Sie möchten, dass das Detail anfangs geöffnet wird, können Sie im details-Element eine Klasse öffnen.

Fazit

Wir haben alle Schritte des Erstellens einer einzelnen Produktseite mit HTML5 durchlaufen, das Debuggen für nicht unterstützte Browser sowie das Replizieren des Umschalteffekts für Details auf eigene Faust. So können Sie hoffentlich viel davon lernen.

Ich bin mir jedoch bewusst, dass ich in diesem Beitrag nicht alles im Detail erklärt habe. Wenn Sie also etwas aufklären möchten, können Sie die Frage im Kommentarfeld unten posten.