Hi, alle.
Willkommen zurück zu einem anderen Code-Review.
Zuvor habe ich eine Navigationsleiste erstellt, die vertikal funktionierte.
Es ging hoch und runter.
Heute möchte ich Ihnen nur zeigen, wie Sie den gleichen HTML-Code verwenden können
, sondern stattdessen eine horizontale Navigationsleiste erstellen können.
Also, schauen wir uns mal an.
Ich möchte zu etwas gehen, das ein bisschen mehr so aussieht.
Und ich bin nicht nur zu einer horizontalen Navigationsleiste gegangen, ich möchte Ihnen
ein Beispiel zeigen, welche Seite die Seite ist, die wir gerade betrachten.
Also, wenn Sie bemerken, in der Navigationsleiste,
sieht der Fotolink ein wenig anders aus als die anderen.
Es ist sehr üblich, dies zu tun, um den Leuten zu zeigen
, dass dies die Seite ist, die Sie gerade betrachten.
Lassen Sie uns also einen Blick auf das CSS werfen und sehen, wie ich einfaches HTML genommen und
es in etwas verwandelt habe, wo ich eine schön gestaltete Navigationsleiste habe.
Alles klar, wir beginnen damit, dass wir sagen, weißt du was?
Wir möchten alle Links, die sich in der Navigationsleiste befinden, formatieren.
Ich möchte nicht alle Links stylen, stattdessen
möchte ich nur die Links angeben, die sich innerhalb des nav befinden.
Und wenn wir das getan haben, war es ziemlich einfach für mich, voranzugehen und zu setzen, dass ich
eine bestimmte Höhe, eine bestimmte Hintergrundfarbe, eine bestimmte Textdekoration möchte.
Eines der Dinge, die ich hier hinzugefügt habe, ist ein Grenzradius. Der
Randradius kurviert die Boxen.
Wenn man also schaut, ist hier entlang der Seite alles etwas gekrümmt.
Da ist nichts zu Wichtiges.
Das nächste, was ich habe,
das neue, ist diese Idee, eine Klasse namens current zu haben.
Was die aktuelle Klasse tut, ist es im Grunde eine Möglichkeit des Taggings.
Hey, kennst du all die verschiedenen Links, die auf meiner Seite sind?
Ich will dir zeigen, auf welche ich gerade schaue.
Und alles, was ich hier getan habe, war, dass ich gegangen bin und ich es so eingestellt
habe, dass ich eine andere Hintergrundfarbe habe.
In Ordnung.
Also, es war ziemlich einfach, diese horizontale
Navigationsleiste zu erstellen, solange Sie sehr vorsichtig mit dem Abstand Dinge aus.
Also noch einmal, ich möchte Ihnen nur zeigen, dass Dinge wie Polsterung und
Marge sehr wichtig sind und sie sehr additiv sind.
Also, wenn Sie Perzente anstelle von Pixeln verwenden, wird es verhindern,
dass es auf einem großen Bildschirm gut aussieht und dann wirklich schlecht auf einem kleinen Bildschirm.
Das letzte, was ich hier reinstelle, nur um etwas Spaß zu haben und
Ihnen zu helfen, wieder einige der verschiedenen Dinge zu zeigen, die Sie mit CSS tun können,
ist, dass ich einen Hover-Zustand für jeden meiner Navigationslinks hinzugefügt habe.
Wenn Sie also einen Blick werfen, bin ich hier reingegangen und
habe gesagt, wenn jemand über der Seite schwebt, will ich die Farbe des Textes ändern
und ich will diese ganze Randradius-Sache loswerden.
Also schauen wir uns mal an.
Geh hier rüber, ich werde über Rezepte schweben und
der Text wird von weiß zu schwarz gedreht, und er ist von Kreis zu Quadrat gegangen.
Jetzt wieder, wenn ich all diese verschiedenen Beispiele mit Ihnen durchgehe, ist es wirklich
wichtig, dass Sie erkennen, dass ich kein Künstler bin, und ich bin nicht sehr künstlerisch.
Und ich hoffe, dass Sie diese Codeausschnitte nehmen und
sie in etwas verwandeln können, das wirklich gut aussieht und für
die Seite angepasst ist, die Sie erstellen möchten.
Also gehen Sie voran, haben Sie etwas Spaß und versuchen Sie jetzt, eine Navigationsleiste zu erstellen,
die auf verschiedene Arten geht, oben und unten, seitlich oder sogar Kombinationen.
Viel Glück.