Schritt Navigation CSS: Machen Sie die Webnavigation prägnanter und klarer

Im heutigen Internetzeitalter ist die Seitennavigation zu einem unverzichtbaren Bestandteil des Webdesigns geworden. Bei der Schrittnavigation handelt es sich um eine Navigationsmethode, die Seiteninhalte in mehrere Schritte unterteilt und Benutzern eine klare Führung bietet. Dies ermöglicht Benutzern nicht nur ein besseres Verständnis der Seitenstruktur, sondern verbessert auch die Bedienflüssigkeit des Benutzers und verringert die Schwierigkeit der Benutzerbedienung. In diesem Artikel besprechen wir die Front-End-Implementierung der Schrittnavigation – CSS-basierte Schrittnavigation.

1. Hintergrund

Die Schrittnavigation ist eine Navigationsmethode, die den Seiteninhalt in mehrere Schritte unterteilt und den Benutzern eine klare Anleitung bietet. Diese Navigationsmethode wird normalerweise verwendet, um Benutzer durch eine Reihe komplexer Vorgänge zu führen. Szenarien, die häufig in Internetanwendungen auftreten, wie z. B. Registrierungsprozess, Bestellvorgang, Zahlungsvorgang usw.

Lassen Sie Benutzer klar erkennen, in welchem ​​Schritt sie sich gerade befinden und was der nächste Schritt ist. Dies ist die wichtigste Funktion der Schrittnavigation. Wenn Benutzer klar erkennen, in welchem ​​Schritt des Prozesses sie sich befinden, verstehen sie besser, was dieser Schritt bewirkt und wie er mit anderen Schritten zusammenhängt, und können dies bestätigen, bevor sie mit dem nächsten Schritt fortfahren.

Um dieses Ziel zu erreichen, zeigen Entwickler normalerweise die Schrittnavigation in der Kopfzeile oder Seitenleiste der Seite an. Und stellen Sie für jeden Schritt eine auswählbare Schaltfläche bereit, um den Benutzer darüber zu informieren, dass der Schritt ausgeführt wird oder abgeschlossen wurde.

2. Frontend-Implementierung – CSS-basierte Schrittnavigation

In CSS kann dieser Stil verwendet werden, um eine vollständige Schrittnavigation zu implementieren. In diesem Abschnitt erfahren Sie, wie Sie mit HTML und CSS eine CSS-basierte Schrittnavigation erstellen.

1. HTML

Beim Erstellen von HTML-Code können Sie die folgende Grundstruktur übernehmen:

<div class="steps-navigation">
  <ul>
    <li class="active">
      <div class="step">
        <span>步骤1</span>
      </div>
    </li>
    <li>
      <div class="step">
        <span>步骤2</span>
      </div>
    </li>
    <li>
      <div class="step">
        <span>步骤3</span>
      </div>
    </li>
    <li>
      <div class="step">
        <span>步骤4</span>
      </div>
    </li>
  </ul>
</div>

In diesem Code-Snippet haben wir eine Schrittnavigation erstellt, die in einem ul-Tag verpackt ist. In li wird jeder Schritt mit einem Namen namens „Schritt x“ angezeigt. Dabei stellt x die Anzahl der Schritte dar. Wir haben auch ein Div namens „step“ erstellt, in dem ein Span verschachtelt ist, um den Schrittnamen zu speichern.

2. CSS

In CSS können Sie die folgenden Stile verwenden, um eine schöne Schrittnavigation zu erstellen.

.steps-navigation {
  margin: 0;
  padding: 0;
}
.steps-navigation ul {
  list-style-type: none;
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0 auto;
}
.steps-navigation ul li {
  display: table-cell;
  text-align: center;
  position: relative;
}
.steps-navigation ul li .step {
  display: block;
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  border: 3px solid #999;
  border-radius: 50%;
  background-color: #fff;
  margin: 30px auto;
  cursor: pointer;
  -webkit-transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.steps-navigation ul li.active .step {
  color: #fff;
  background-color: #00bcd4;
  border-color: #00bcd4;
}
.steps-navigation ul li:before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #ccc;
}
.steps-navigation ul li:last-child:before {
  display: none;
}
.steps-navigation ul li.active~li:before {
  background-color: #00bcd4;
}
.steps-navigation ul li:first-child .step {
  margin-left: 0;
}
.steps-navigation ul li:last-child .step {
  margin-right: 0;
}

Der obige Code enthält viele Stile, jeder mit einem bestimmten Zweck. Dies ist Teil des Verständnisses der CSS-Schrittnavigation.

3. Stilerklärung

Hier erklären wir die Stile einzeln.

.steps-navigation {
  margin: 0;
  padding: 0;
}

Die Funktion dieses Teils besteht darin, die Ränder und den Abstand der Schrittnavigation festzulegen.

.steps-navigation ul {
  list-style-type: none;
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0 auto;
}

Die Funktion dieses Teils besteht darin, die Kompatibilität zwischen der Schrittnavigation und dem äußeren UL-Element festzulegen.

.steps-navigation ul li {
  display: table-cell;
  text-align: center;
  position: relative;
}

Die Funktion dieses Teils besteht darin, das in jedem Schritt enthaltene li-Element festzulegen. Es verwendet den Stil display:table-cell, um das li-Element zu einem Inline-Element zu machen.

.steps-navigation ul li .step {
  display: block;
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  border: 3px solid #999;
  border-radius: 50%;
  background-color: #fff;
  margin: 30px auto;
  cursor: pointer;
  -webkit-transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

Die Funktion dieses Teils besteht darin, die Elemente „Schritt x“ und „Span“ in jedem Schritt festzulegen. Es verwendet viele Stile, um seine Eigenschaften festzulegen, einschließlich Elementbreite, Höhe, Rahmen, Hintergrund und mehr.

.steps-navigation ul li.active .step {
  color: #fff;
  background-color: #00bcd4;
  border-color: #00bcd4;
}

Die Funktion dieses Teils besteht darin, den Stil des ausgewählten Schritts festzulegen. Wenn der Schritt aktiv ist (d. h. der aktuelle Schritt), ändern sich auch die Hintergrundfarbe, die Schriftfarbe usw.

.steps-navigation ul li:before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #ccc;
}

Die Funktion dieses Teils besteht darin, für jeden Schritt horizontale Trennlinien hinzuzufügen.

.steps-navigation ul li.active~li:before {
  background-color: #00bcd4;
}

Die Funktion dieses Teils besteht darin, die Hintergrundfarbe seiner führenden horizontalen Trennlinie zu ändern, wenn der Schritt aktiv ist (d. h. der aktuelle Schritt).

4. Zusammenfassung

In diesem Artikel haben wir die Verwendung von CSS zum Erstellen einer Front-End-Implementierung der Schrittnavigation besprochen. Die Schrittnavigation ist eine häufig in Internetanwendungen verwendete Navigationsmethode. Sie ermöglicht es Benutzern, die Seitenstruktur besser zu verstehen, die Bedienkompetenz zu verbessern und Bedienschwierigkeiten zu reduzieren. Durch den Einsatz der oben genannten Technologien können wir eine reibungslose Benutzeroberfläche für unsere Website oder Anwendung erstellen und das Benutzererlebnis verbessern. Basierend auf der CSS-Schrittnavigation können wir die Implementierung weiter erweitern, indem wir beispielsweise JavaScript verwenden, um Animationen oder interaktive Effekte hinzuzufügen. Ich glaube, dass dies eine gute Wahl für Ihr Web-Navigationsdesign sein wird!

Das obige ist der detaillierte Inhalt vonSchritt Navigation CSS: Machen Sie die Webnavigation prägnanter und klarer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!