Hi, alle.
Willkommen zurück.
Da es Woche vier
ist und Sie an Ihrem endgültigen Projekt arbeiten, möchte ich Ihnen
einige der verschiedenen Optionen zeigen, die Sie beim Styling Ihrer Seiten verwenden können.
Und in diesem Video
möchte ich Ihnen zeigen, was passiert, wenn Sie versuchen, eine vertikale Navigationsleiste zu erstellen.
Also hier drüben in meinem Browser,
ich habe, wie die Seite aussehen wird, wenn wir fertig sind.
Aber lassen Sie uns voran und ich werde Refresh drücken und zuerst sehen, wie es aussehen würde,
wenn ich versucht habe, eine Navigationsleiste mit vier einfachen Links zu erstellen.
Auch hier sind Links inline, so dass sie nebeneinander gehen.
Es gibt keine Farbe.
Da ist nichts los.
Und es ist wirklich schrecklich.
Also lassen Sie mich diesen Stil wieder einbringen.
Aktualisieren Sie die Seite.
Und ich werde Ihnen zeigen, wie ich diese Navigationsleiste erstellt habe.
Beginnen wir damit, über den Körper zu sprechen.
Ich habe nur eine Hintergrundfarbe, Polsterung und Rand eingefügt.
Das ist hier nicht wirklich wichtig.
Was wichtig ist, ist über unseren Navigationsbereich zu sprechen.
Eines der Dinge, die ich tun wollte, ist, Ihnen die Idee zu zeigen
, diese Box-Größen-Border-Box zu verwenden.
Was dies tun wird, ist, dass es die Notwendigkeit für
Sie wegnimmt, wie viel Breite, wie viel Polsterung, wie viel Grenze zu zählen.
Du brauchst nicht die Mathematik zu machen.
Der Browser wird es für Sie tun.
Ich habe einige einfache Rahmen, Farbe, Hintergrundfarbe usw.
Das erste, was ich getan habe, ist, dass ich es inline-Block gemacht habe,
weil ich möchte, dass meine Navigation neben den anderen Teilen meiner Seite ist.
Und da Nav Block ist, wird es nicht passieren, es sei denn, ich werfe es da rein.
Also sagte ich, ich wollte, dass es etwa 20% der Seite ist und dann etwas Marge hinzugefügt hat.
Nun, etwas Neues, das Sie vielleicht noch nicht gesehen haben, ist diese Idee der Höhe
gleich 100vh.
Das ist Ihre Höhe des Ansichtsfensters.
Das bedeutet, ich möchte, dass die Navigation die gesamte Höhe Ihrer Seite einnimmt.
Ich bin nicht hart, es auf 400 Pixel oder 200 Pixel zu beschichten
, denn ich weiß nicht, wie groß der Bildschirm ist, den du ansiehst.
Lassen Sie uns als nächstes über die tatsächlichen Längen selbst sprechen.
Was ich hineingegangen und getan habe ist, dass ich die regelmäßigen langweiligen Links weggenommen habe und
ich habe sie wirklich gestylt, um sie etwas ein wenig origineller zu machen.
Also habe ich eine Höhe von, wie hoch ich möchte, dass jeder meiner Links sein soll.
Und dann habe ich ein bisschen einen Trick eingelegt und
ich sagte, ich möchte, dass die Zeilenhöhe 45 Pixel beträgt.
Also, warum sollte ich das tun?
Der Grund wäre, dass ich Home-Fotos zentrieren
möchte oder ich möchte die Wörter darin zentrieren und so kann ich es tun.
Die nächste Art von coolen Sache, die ich getan habe, ist, dass ich ein Hintergrundbild hinzugefügt habe.
Ich fügte diese kleinen Pfeile hinzu.
Und die coole Sache, die ich tun musste, die ich wirklich darauf hinweisen möchte, ist, dass
ich nicht einfach auf den Ordner und dann die Datei verlinken konnte.
Wegen der Art, wie ich meinen Code eingerichtet habe, muss ich zuerst sagen, oh, ich weiß, dass ich
gerade im CSS-Ordner bin, also gehe ich zurück zu meinem Hauptordner und finde dann Bilder.
Wenn das für dich verwirrend ist, mach dir keine Sorgen.
Es ist ein brandneues Konzept, aber es ist etwas, auf das viele von Ihnen
stoßen werden, wenn Sie versuchen, Bilder von Ihrem Stylesheet zu verknüpfen.
In Ordnung.
Das letzte, was ich getan habe, war, nur ein wenig Polsterung hinzuzufügen, also gibt es Platz für
das Bild, und fügen Sie dann etwas Marge hinzu.
Mit diesen verschiedenen Dingen, über die wir bereits gesprochen haben, Position, Entschuldigung,
Anzeige, Zeilenhöhe, Hintergrund-URLs, konnten wir etwas machen,
das meiner Meinung nach wirklich cool für eine einfache, vertikale Navigationsleiste aussieht.
Probieren Sie es aus.
Viel Glück.