So erstellen und entwerfen Sie eine Navigationsleiste in CSS?

Html

• Heim


• Um


• Dienstleistungen


• Kontaktiere uns

Hier haben wir einige Listenelemente erstellt und einige Anker -Tags im Inneren verschachtelt

CSS

Standardmäßig

Die Elemente sollten einen Rand und eine Polsterung von 0PX erhalten, und der Listenstil -Typ sollte auf keine festgelegt werden. Zuletzt haben wir die Anker -Tags nach unserem Wunsch entworfen.

Ausgang

Eine horizontale Navigationsleiste wurde unter Verwendung von Inline -List -Elementen erstellt.

Erstellen einer Navigationsleiste mit Div

Lassen Sie uns untersuchen, wie Sie eine horizontale Navigationsleiste mit DIV erstellen.

Html


Heim
Um
Dienstleistungen
Kontaktiere uns


Im obigen HTML -Code haben wir eine DIV erstellt und sie die zugewiesen Topnav Klasse. In diesem Div haben wir vier Anker -Tags verschachtelt und das erste Anker -Tag wurde der Klasse aktiv.

CSS

Körper
Rand: 0;

.topnav
Hintergrundfarbe: Grau;
Überlauf versteckt;

.topnav a
float: links;
Farbe weiß;
Text-Align: Mitte;
Polsterung: 15px 18px;
Textdekoration: Keine;
Schriftgröße: 17px;

.Topnav A: Hover
Hintergrundfarbe: Ghostwhite;
Farbe: Schwarz;

.topnav a.aktiv
Hintergrundfarbe: Lachs;
Farbe weiß;


Die Topnav -Klasse wird verwendet, um der gesamten Navigationsleiste eine Hintergrundfarbe zu verleihen. Wir haben dann die Links im Div -Container gemäß unseren Anforderungen gestaltet. Darüber hinaus haben wir das Styling für Schwachsinn und aktive Wirkung auf den Navigationsverbindung hinzugefügt.

Ausgang

Mit dem Div und dem Tag haben wir erfolgreich eine horizontale Navigationsleiste erstellt.

Mehr über die horizontale Navigationsleiste!

Es gibt noch ein paar lustige Dinge, die Sie in Ihre Navigationsleiste hinzufügen können. Lassen Sie uns sie erkunden.

Wie man in einer Navigationsleiste einen Link rechts fährt

Eine interessante Sache, die Sie tun können, ist, dass Sie einen Link in der Navigationsleiste nach rechts schweben können, wenn Sie möchten. Stellen Sie die Float -Eigenschaft dieses bestimmten Links nach rechts fest und sehen Sie die Änderung an.


Heim
Um
Dienstleistungen
Kontaktiere uns


Hier haben wir die Float -Eigenschaft des letzten Anker -Tags nach rechts festgelegt und sie außerdem eine aktive Klasse zugewiesen.

Ausgang

Ein Link wurde nach rechts erfolgreich schwebt.

So erstellen Sie eine erstklassige feste Navigationsleiste

Um die Navigationsleiste nach oben zu reparieren, geben Sie dem Div -Container eine feste Position und eine gewisse Breite an.

Html


Heim
Um
Dienstleistungen
Kontaktiere uns




Einige Inhalte.




Einige Inhalte.




Einige Inhalte.




Einige Inhalte.




Einige Inhalte.




Einige Inhalte.




Einige Inhalte.




Einige Inhalte.




Einige Inhalte.




Einige Inhalte.




Um der Arbeit einer festen Top -Navigationsleiste anzuzeigen, haben wir einen Gaumen von Inhalten erstellt, um die feste Navigationsleiste zu demonstrieren.

CSS

.topnav
Hintergrundfarbe: Grau;
Überlauf versteckt;
Position: fest;
Top: 0;
Breite: 100%;

.Inhalt
Polsterung: 20px;
Höhe: 1000px;


Wir weisen die Navigationsleiste eine feste Position und eine Breite zu 100% zu. Darüber hinaus setzen wir die Oberseite auf 0PX ein.

Ausgang

Eine feste Top -Navigationsleiste wurde erfolgreich erstellt.

So erstellen Sie eine untere feste Navigationsleiste

Sie können auch eine feste Navigationsleiste erstellen. So machst du es.

CSS

.topnav
Hintergrundfarbe: Grau;
Überlauf versteckt;
Position: fest;
unten: 0;
Breite: 100%;


Hier wurde nicht nur die Navigationsleiste eine feste Position gegeben, sondern der Boden auf 0PX gesetzt.

Ausgang

Die feste Navigationsleiste für die untere Unterseite funktioniert ordnungsgemäß.

So erstellen Sie eine Haftnavigationsleiste

Verwenden Sie zum Zwecke der Erstellung einer klebrigen Navigationsleiste den klebrigen Wert der CSS -Position Eigenschaft.

CSS

.topnav
Hintergrundfarbe: Grau;
Überlauf versteckt;
Position: klebrig;
Top: 0;


Hier haben wir die Position der Navigationsleiste auf klebrige Stelle gesetzt.

Ausgang

Eine klebrige Navigationsleiste wurde erfolgreich erstellt.

Vertikale Navigationsleiste

Um eine vertikale Navigationsleiste zu erstellen, müssen Sie lediglich die Anzeige der Links in der Navigationsleiste festlegen, um die CSS -Anzeigeblockeigenschaft zu blockieren.

CSS

.topnav a
Bildschirmsperre;
Farbe weiß;
Text-Align: Mitte;
Polsterung: 15px 18px;
Textdekoration: Keine;
Schriftgröße: 17px;


Die Anker-Tags werden als Elemente auf Blockebene angezeigt, um eine vertikale Navigationsleiste zu erstellen.

Ausgang

Eine vertikale Navigationsleiste wurde erfolgreich erstellt.

Wie man die vertikale Navigationsleiste ausrichtet

Um Ihre vertikale Navigationsleiste auszurichten, können Sie sie in Ihre gewünschte Position schweben und ihm eine Breite geben.

CSS

.topnav
Hintergrundfarbe: Grau;
Breite: 30%;
schweben rechts;
Überlauf versteckt;


Hier setzen wir die Float -Eigenschaft des Rechts und geben der Div eine Breite von 30%.

Ausgang

Die vertikale Navigationsstange wurde rechts schweb.

Abschluss

Eine Navigationsleiste spielt eine wesentliche Rolle bei der Steigerung der Benutzererfahrung einer Website. Daher können Sie eine angenehme Navigationsleiste mit verschiedenen Ansätzen erstellen. Zum Erstellen einer horizontalen Navigationsleiste können Sie entweder HTML -Listenelemente oder eine Kombination aus Div und Tag in CSS verwenden. Mit Ihrer Navigationsleiste können Sie viele lustige Dinge tun, z. Außerdem können Sie auch eine vertikale Navigationsleiste erstellen, indem Sie Links als Elemente auf Blockebene anzeigen. Dieser Beitrag leitet Sie alle zum Erstellen und Entwerfen einer Navigationsleiste.