Zentrieren Sie die Navigationsleiste mit CSS

1. Navigationsleiste in HTML
2. Erstellen Sie eine Navigationsleiste mit HTML und CSS
3. Zentrieren Sie die Navigationsleiste mit CSS

In diesem Artikel werden die verschiedenen Positionen der Navigationsleiste untersucht, die ein wesentlicher Bestandteil einer Website ist. Wir werden auch seinen Zweck und verschiedene Ausrichtungseinstellungen kennenlernen.

Navigationsleiste in HTML

Die GUI umfasst ein Navigationssystem oder eine Leiste, die den Informationszugriff für Benutzer erleichtert. Die Komponente der Benutzeroberfläche (UI) einer Webseite enthält Links zu den anderen Abschnitten der Website und wird als Navigationsleiste oder Navigationsleiste bezeichnet.

Eine Navigationsleiste erscheint oft oben auf der Seite als horizontale Liste von Links. Es kann über oder unter der Kopfzeile positioniert werden, muss aber immer vor dem Hauptinhalt der Seite stehen.

Die Navigation einer Website muss einfach zu bedienen sein. Es wirkt sich erheblich auf die Website aus, da es den Besuchern einen schnellen Zugriff auf jeden Bereich ermöglicht.

Es kann zwei verschiedene Stile für die Navigationsleiste auf Ihrer Website geben:

1. Horizontale Navigationsleiste
2. Vertikale Navigationsleiste

Erstellen Sie eine Navigationsleiste mit HTML und CSS

Zuerst werden wir sehen, wie die Navigationsleiste mit Hilfe von HTML-Komponenten erstellt wird. Da die Navigationsleiste nur eine Liste verschiedener Links ist, werden Listenelemente, also <ul> und <li>, verwendet, um eine Navigationsleiste zu erstellen.

Jedes Element in der Liste ist ein Link zu einer anderen Website-Seite. Die Liste wird also wie folgt erstellt.

Beispielcode:

<div>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About Us</a></li>
        <li><a href="admission.php">Admissions</a></li>
    </ul>
</div>

li::marker {
    content: '';
}

Da es sich um ein einfaches <ul>-Element handelt, müssen wir verschiedene CSS-Eigenschaften darauf anwenden, damit es als Navigationsleiste fungiert:

<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
}

li a {
  display: block;
  padding: 9px;
  background-color: dark blue;
}
</style>

li::marker {
    content: '';
}

<div>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About Us</a></li>
        <li><a href="admission.php">Admissions</a></li>
    </ul>
</div>

In diesem Beispiel vermitteln verschiedene CSS-Eigenschaften unterschiedliche Zwecke:

1. Der list-style-type wird auf none gesetzt, um die Aufzählungszeichen in der Navigationsleiste zu entfernen.
2. margin und padding sind standardmäßig auf Null gesetzt, um alle Ränder im Browser zu entfernen.
3. Die Eigenschaft overflow wird auf einen hidden-Wert gesetzt, um die li-Elemente daran zu hindern, sich aus der Liste herauszubewegen.
4. Der float wird auf den Wert left gesetzt, um die Navigationsleiste in horizontaler Richtung zu erstellen.
5. Für die <li>-Elemente wird display: block verwendet, um die Hyperlinks in die Blockposition zu bringen, wodurch der gesamte Block anklickbar wird.

Wir können dieser Navigationsleiste verschiedene Stile und Formatierungen zuweisen, z. B. Hintergrundfarbe und text-Farbe.

Zentrieren Sie die Navigationsleiste mit CSS

Um die Navigationsleiste in der Mitte der Seite auszurichten, können wir zwei Eigenschaften hinzufügen: eine zum div-Element und die andere zum <ul>-Element wie folgt:

div{
text-align: center;
}
ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

<div>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About Us</a></li>
        <li><a href="admission.php">Admissions</a></li>
    </ul>
</div>

Wir haben das div erstellt, um den Text in der Mitte auszurichten, und dann haben wir das ul-Element erstellt, um inline-block anzuzeigen. Dadurch wird die Liste der Elemente in die Mitte der Seite verschoben.

Sie können also sehen, dass wir die Navigationsleiste in der Mitte der Seite erstellt haben, indem wir einfach zwei Eigenschaften zugewiesen haben. Wir können auch mehrere Eigenschaften anwenden, die die Navigationsleiste gemäß unseren Designanforderungen dekorieren können.