CSS-Einstellungen für die Navigationsleiste

Als Webentwickler müssen wir oft eine schöne und praktische Seitennavigationsleiste entwerfen. In HTML können Sie die Tags <ul></ul> und <li> verwenden, um eine einfache Navigationsleiste zu erstellen. Wenn Sie jedoch Stil und interaktive Effekte hinzufügen möchten, wir Dies muss mit CSS erfolgen. <ul></ul>和<li>标签来创建一个基本的导航条，但是如果想要增加一些样式和交互效果，我们需要使用CSS来完成。

本文将介绍如何使用CSS来设计导航条，从简单的样式到复杂的效果，逐步详解。

CSS-Einstellungen für die Navigationsleiste

首先，我们来创建一个简单的导航条。在HTML代码中，我们使用<ul></ul>和<li>

In diesem Artikel erfahren Sie Schritt für Schritt, wie Sie mit CSS Navigationsleisten entwerfen, von einfachen Stilen bis hin zu komplexen Effekten.

Basic Style

Erstellen wir zunächst eine einfache Navigationsleiste. Im HTML-Code verwenden wir die Tags <ul></ul> und <li>, um eine ungeordnete Liste zu erstellen, und verwenden dann CSS, um den Stil, die Größe und die Farbe der Liste festzulegen usw. Attribute wie folgt:

<ul class="nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">关于</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

rrree

Durch die oben genannten Stileinstellungen haben wir eine einfache Navigationsleiste erhalten, wie unten gezeigt:

#🎜🎜 #

Hover-Effekt

Als nächstes können wir einen einfachen und praktischen Hover-Effekt hinzufügen, sodass die Hintergrundfarbe und der Text geändert werden können, wenn sich der Mauszeiger über der Navigationsleiste befindet andere Attribute, um den visuellen Effekt des Benutzers zu verbessern. Wir können dies erreichen, indem wir die Pseudoklasse :hover wie folgt festlegen:

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  background-color: #333;
}

.nav li {
  margin: 0;
}

.nav a {
  display: block;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
}

Der obige Code bedeutet, dass sich die Hintergrundfarbe des Links ändert, wenn der Benutzer den Mauszeiger über den Navigationslink bewegt auf #555, und der Text wird weiß. Der fertige Effekt ist wie folgt:

Unterstreichungseffekt

Der nächste zu erzielende Effekt ist, wenn der Benutzer mit der Maus darüber fährt Navigationsleiste Wenn der Link aktiv ist, wird unter dem Link ein Unterstreichungseffekt angezeigt. Dies ist ein relativ häufiger Effekt, der es Benutzern ermöglicht, klarer zu erkennen, welchen Navigationslink sie gerade auswählen.

Wir können dies tun, indem wir ein Pseudoelement hinzufügen: vor dem Link. Wenn der Benutzer mit der Maus über den Link fährt, wird das Pseudoelement angezeigt und der untere Rand wird länger. Der Code lautet wie folgt:

.nav a:hover {
  background-color: #555;
  color: #fff;
}

Der obige Code bedeutet, dass, wenn sich der Mauszeiger über den Navigationslink bewegt, das Pseudoelement sowie die Übersetzungs-, Rotations- und Skalierungsanimationseffekte des Elements angezeigt werden wird über das Transformationsattribut festgelegt. Der fertige Effekt ist wie folgt:

Gleiteffekt

Der nächste zu erzielende Effekt ist, wenn der Benutzer die Navigation auswählt Link: Unterhalb der Navigationsleiste wird ein Schiebeindikatoreffekt angezeigt. Durch diesen Effekt können Benutzer besser erkennen, wo sich der von ihnen ausgewählte Navigationslink befindet.

Wir können dies tun, indem wir einen Indikatorcontainer und ein untergeordnetes Indikatorelement erstellen. Wenn der Benutzer einen Navigationslink auswählt, verschiebt sich die Anzeige von einer Position zur anderen. Der Code lautet wie folgt:

.nav a:hover:before {
  content:'';
  display: block;
  border-bottom: 4px solid #fff;
  transform: scaleX(0);
  transition: transform .3s ease-in-out;
}

.nav a:hover:before {
  transform: scaleX(1);
}

<ul class="nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">关于</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">联系我们</a></li>
  <div class="indicator"></div>
</ul>

Der obige Code bedeutet, dass, wenn der Benutzer einen Navigationslink auswählt, der entsprechende Indikator unter den Link verschoben wird. Durch Festlegen der Breite und des Antwortversatzes der Indikatoren für verschiedene Links können wir unterschiedliche Gleiteffekte erzielen. Der fertige Effekt ist wie folgt:

#🎜🎜#Zusammenfassung#🎜🎜##🎜🎜#In diesem Artikel wird erläutert, wie Sie mithilfe von CSS verschiedene Arten von Navigationsleisten erstellen , einschließlich Basisstile, Hover-Effekte, Unterstreichungseffekte, Gleiteffekte usw. Diese Effekte können das interaktive Erlebnis des Benutzers verbessern und die Seite schöner und benutzerfreundlicher machen. Durch kontinuierliches Lernen und Üben können wir das Design und die Wirkung der Seite kontinuierlich verbessern und perfektionieren, um den Benutzern ein besseres Erlebnis zu bieten. #🎜🎜#

Das obige ist der detaillierte Inhalt vonCSS-Einstellungen für die Navigationsleiste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!