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.