So erstellen Sie mit CSS eine einfache Schrittnavigation

Die Schrittnavigation wird häufig im Webdesign verwendet. Sie kann den Benutzern die Bedienung erleichtern, insbesondere wenn die Schrittnavigation den Benutzern hilft, den aktuellen Fortschritt zu verstehen und den Vorgang zu meistern. In diesem Artikel erfahren Sie, wie Sie mithilfe von CSS eine einfache Schrittnavigation erstellen.

Zuerst müssen wir eine HTML-Datei öffnen und dann ein div-Element erstellen, das die Schrittnavigation in der Datei enthält. Dieses div-Element hat einen Klassennamen: „step-nav“.

<div class="step-nav">

</div>

Als nächstes müssen wir für jeden Schritt ein benutzerdefiniertes Schrittelement erstellen. In diesem Beispiel erstellen wir eine vierstufige Navigation.

<div class="step-nav">
  <div class="step">
    <span>步骤1</span>
  </div>
  <div class="step">
    <span>步骤2</span>
  </div>  
  <div class="step">
    <span>步骤3</span>
  </div>
  <div class="step">
    <span>步骤4</span>
  </div>
</div>

Jeder Schritt ist ein benutzerdefiniertes div-Element mit dem Klassennamen „step“ und einem span-Element, das den Schrittnamen enthält.

Als nächstes müssen wir CSS verwenden, um unsere Schrittnavigation anzupassen. Zunächst definieren wir grundlegende Stile für die Klassen „step-nav“ und „step“.

.step-nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

.step {
  width: 100px;
  height: 50px;
  background-color: #ccc;
  margin: 0 10px;
  text-align: center;
  line-height: 50px;
  font-size: 18px;
  color: #fff;
  border-radius: 5px;
}

Hier haben wir Flexbox verwendet, um die Schrittnavigation zu zentrieren und die Schrittelemente horizontal verteilen zu lassen. Darüber hinaus definieren wir Stileigenschaften wie Breite, Hintergrundfarbe, Ränder, Textausrichtung, Zeilenhöhe, Schriftgröße, Textfarbe und Rahmenradius für das Schrittelement.

Jetzt möchten wir dem aktiven Schritt (d. h. dem Schritt, in dem sich der Benutzer gerade befindet) einen Stil hinzufügen. Wir können den Pseudoklassenselektor „:nth-child“ verwenden, um das erste Element im Schritt auszuwählen.

.step:nth-child(1) {
  background-color: #007aff;
}

Hier ändern wir die Hintergrundfarbe des ersten Elements der Schrittnavigation in Blau, um anzuzeigen, dass es sich um einen aktiven Schritt handelt.

Als nächstes müssen wir Hover-Stile für jeden Schritt hinzufügen. Wenn der Benutzer mit der Maus über das Schrittelement fährt, können wir über CSS helle Farben hinzufügen, um die Aufmerksamkeit des Benutzers zu erregen.

.step:hover {
  background-color: #ff4a57;
}

Jetzt können wir sehen, dass unsere Schrittnavigation bereits über einige grundlegende Stile verfügt. Allerdings müssen wir auch Verbindungen zwischen den Schritten hinzufügen, um den Fluss zwischen den Schritten besser darzustellen. Wir können die Pseudoelementselektoren „::before“ und „::after“ verwenden, um rechteckige Linien zu erstellen.

.step::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-right: 20px solid #ccc;
  left: -20px;
  z-index: -1;
}

.step:first-child::before {
  display: none;
}

.step:last-child::after {
  display: none;
}

.step::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 20px solid #ccc;
  right: -20px;
  z-index: -1;
}

Hier verwenden wir die absolute Positionierung, um Pseudoelemente zu jedem Schritt hinzuzufügen, und setzen das „content“-Attribut für sie auf „“, damit sie keinen Text erzeugen. Wir haben auch die Eigenschaft „border“ verwendet, um rechteckige Linien für sie zu erstellen.

Schließlich verwenden wir die Pseudoklassen „first-child“ und „last-child“, um den ersten und letzten Schritt auszuwählen und ihre Pseudoelemente „::before“ und „::after“ hinzuzufügen werden ausgeblendet, um redundante horizontale Linien an beiden Enden der Schrittnavigation zu vermeiden.

Jetzt haben wir das gesamte Styling unserer benutzerdefinierten Schrittnavigation abgeschlossen. Das Endergebnis können wir im Browser betrachten.

<html>
  <head>
    <style>
      .step-nav {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .step {
        width: 100px;
        height: 50px;
        background-color: #ccc;
        margin: 0 10px;
        text-align: center;
        line-height: 50px;
        font-size: 18px;
        color: #fff;
        border-radius: 5px;
        position: relative;
      }

      .step:nth-child(1) {
        background-color: #007aff;
      }

      .step:hover {
        background-color: #ff4a57;
      }

      .step::before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-right: 20px solid #ccc;
        left: -20px;
        z-index: -1;
      }

      .step:first-child::before {
        display: none;
      }

      .step::after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-left: 20px solid #ccc;
        right: -20px;
        z-index: -1;
      }

      .step:last-child::after {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="step-nav">
      <div class="step">
        <span>步骤1</span>
      </div>
      <div class="step">
        <span>步骤2</span>
      </div>  
      <div class="step">
        <span>步骤3</span>
      </div>
      <div class="step">
        <span>步骤4</span>
      </div>
    </div>
  </body>
</html>

Im Allgemeinen ist die Schrittnavigation eines der sehr praktischen Elemente im Webdesign. Sie kann Benutzern die Bedienung erleichtern, insbesondere bei der Erledigung mehrstufiger Aufgaben. Das Erstellen einer einfachen Schritt-für-Schritt-Navigation mit CSS ist relativ einfach, Sie müssen sich nur um die Stildetails kümmern.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit CSS eine einfache Schrittnavigation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!