So erstellen Sie mit CSS schöne Stufenleisten

Mit der zunehmenden Beliebtheit moderner Websites erfordern viele Websites mehrstufige Vorgänge, wie z. B. Registrierungsseiten, Zahlungsseiten usw. Unter solchen Umständen ist die Einführung von Trittstangen eine gängige Wahl, um den Benutzern ein besseres Bedienerlebnis zu bieten. Die Schrittleiste kann dem Benutzer nicht nur den aktuellen Fortschritt vermitteln, sondern bietet dem Benutzer auch die Funktion, historische Vorgänge anzuzeigen und bequem und schnell zu vorherigen Schritten zurückzukehren. Daher sind Schrittleisten insbesondere bei der Gestaltung komplexer Seiten erforderlich.

In diesem Artikel erfahren Sie, wie Sie mithilfe von CSS eine gut aussehende Schrittleiste erstellen und welche Techniken und Schritte erforderlich sind.

Design und Implementierung der Schrittleiste

Um eine CSS-Schrittleiste zu erstellen, müssen Sie die folgenden Schritte ausführen:

Schritt 1: Schreiben von HTML-Code

In diesem Schritt müssen Sie HTML-Code für die Schrittleiste schreiben , einschließlich des Containerelements „Stufenleiste“ und untergeordneter Elemente für jeden Schritt. Im Containerelement der Schrittleiste müssen wir das Tag „ul“ verwenden, um eine ungeordnete Liste zu erstellen. Jeder Schritt erfordert die Verwendung des „li“-Tags als untergeordnetes Element. Um den Fortschritt der Schrittleiste anzuzeigen, müssen wir Zahlen oder andere Bezeichner hinzufügen, die den aktuellen Fortschritt in jedem untergeordneten Element darstellen (wie in Abbildung 1 dargestellt). Der Bezeichner kann ein Symbol, eine Farbe oder ein Fortschrittsbalken sein.

<ul class="progress">
  <li class="active">1</li>
  <li>2</li>
  <li>3</li>
</ul>

Abbildung 1: Beispiel einer Schrittkennung

Schritt 2: CSS schreiben

In diesem Schritt müssen Sie ein CSS-Stylesheet schreiben, um die Schrittleiste zu formatieren. Das Design des Schrittleisten-CSS besteht aus zwei Teilen: der Schrittkennung und der Schrittleiste selbst.

Für die Gestaltung von Schrittkennungen können verschiedene Methoden genutzt werden, wie zum Beispiel die Verwendung von Icons oder Bildern, Zahlen oder anderen Elementen, die den Fortschritt darstellen, oder Fortschrittsbalken. Hier ist ein Beispiel:

.progress li::before {
  content: ' ';
  display: block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  margin: 0 auto 20px auto;
}

.progress li:first-child::before {
  border-color: #7f8fa4;
}

.progress li.active::before {
  background-color: #3498db;
  color: #fff;
}

Abbildung 2: Stilbeispiel für Schrittkennungen

In diesem Beispiel haben wir ein kreisförmiges Symbol verwendet, um jeden Schritt darzustellen. Um ein kreisförmiges Symbol zu erstellen, verwenden wir die CSS-Pseudoklasse „::before“, um ein Pseudoelement vor dem li-Element zu erstellen. Wir verwenden die Eigenschaften „height“ und „width“, um die Höhe und Breite des Symbols festzulegen, und die Eigenschaft „line-height“, um das Symbol vertikal zu zentrieren. Verwenden Sie das Attribut „margin“, um ein Element innerhalb seines übergeordneten Elements vertikal zu zentrieren. Mit der Eigenschaft „border-radius“ können wir das Aussehen des Elements so ändern, dass es kreisförmig erscheint. Um die Schrittkennung auszuwählen, haben wir die Pseudoklasse „:first-child“ verwendet, um das erste li-Element auszuwählen.

Für die Gestaltung der Trittleiste selbst können wir verschiedene Methoden nutzen, um dies zu erreichen. Hier verwenden wir einen rechteckigen Fortschrittsbalken, um den aktuellen Fortschritt darzustellen. Hier ist ein Beispiel mit den Attributen Hintergrundfarbe und Schatten:

.progress {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.progress li {
  flex: 1;
  font-size: 14px;
  text-align: center;
  position: relative;
}

.progress li:not(:last-child):after {
  content: '';
  position: absolute;
  top: 6px;
  left: calc(50% + 10px);
  width: calc(100% - 10px);
  height: 4px;
  background-color: #e0e0e0;
  z-index: -1;
}

.progress li.active {
  font-weight: bold;
}

.progress li.active:not(:last-child):after {
  background-color: #3498db;
}

Abbildung 3: Beispiel einer Stufenleiste

In diesem Beispiel verwenden wir das Attribut „flex“, um die Stufensymbole horizontal anzuordnen. Wir verwenden das Attribut „list-style“, um die Standardaufzählungszeichen vor dem ul-Element auszublenden. Wir verwenden die Eigenschaften „margin“ und „padding“, um die Ränder und den Abstand der Schrittleiste festzulegen. Wir haben der Schrittleiste außerdem einen hellen Hintergrund und einen Schatteneffekt hinzugefügt, indem wir die Eigenschaften „background-color“ und „box-shadow“ verwendet haben.

Für jedes Schrittelement verwenden wir das Attribut „flex: 1“, um die Schrittsymbole gleichmäßig in der Schrittleiste anzuordnen. Wir verwenden außerdem das Attribut „font-size“, um die Schriftgröße des Schrittsymbols festzulegen, und das Attribut „text-align“, um das Schrittsymbol zentriert auszurichten. Verwenden Sie das Attribut „position“ für die relative Positionierung und das Pseudoelement „:not(:last-child):after“, um für alle Schritte außer dem letzten einen Fortschrittsbalken hinzuzufügen. Verwenden Sie das Pseudoelement „:after“, um ein Pseudoelement innerhalb eines Elements hinzuzufügen. Verwenden Sie die Attribute „top“ und „left“, um das Pseudoelement rechts von der Mitte des Schrittsymbols zu positionieren. Legen Sie die Abmessungen des Pseudoelements über die Eigenschaften „width“ und „height“ fest. Verwenden Sie das Attribut „background-color“, um die Farbe für das Pseudoelement festzulegen. Setzen Sie das Attribut „z-index“ auf eine negative Zahl, damit das Schrittsymbol das Pseudoelement überlagert. Um das Schrittleistenelement auszuwählen, verwenden wir die Pseudoklasse „:active“, um das aktuell aktive li-Element auszuwählen.

Schritt drei: Follow-up des Interaktionsdesigns

Da das Stufenleistendesign implementiert werden soll, müssen wir das gesamte Interaktionsdesign überprüfen, um sicherzustellen, dass jeder Schritt korrekt mit der entsprechenden Formularseite verknüpft ist. Wenn sich Ihre Website in der Mobile-First-Designphase befindet, stellen Sie sicher, dass der Stufenleistenstil korrekt skaliert wird. Sie können auch Animationseffekte hinzufügen, um den interaktiven Effekt der Schrittleiste zu verstärken und so das Benutzererlebnis zu verbessern.

Fazit

In diesem Artikel haben wir einige notwendige Schritte zum Entwerfen einer Trittleiste mithilfe von CSS behandelt. Für das Design der Trittleiste haben wir hauptsächlich HTML und CSS verwendet, um sie zu erstellen und zu rendern. Wir müssen bestrebt sein, Trittleisten so zu gestalten, dass Benutzer die von ihnen ausgeführten Vorgänge verstehen und ihnen so dabei helfen, die erforderlichen Vorgänge auf zeit- und aufwandssparendere Weise auszuführen. Selbstverständlich können wir das Stepbar-Design auch mit vielen anderen interaktiven Elementen kombinieren, um die Interaktivität der Website weiter zu verbessern.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit CSS schöne Stufenleisten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!