Trittleiste CSS

Im Webdesign sind Schrittleisten ein häufiges Navigationselement, das Benutzern helfen kann, besser zu verstehen, wo sie sich gerade befinden und welche Schritte sie als Nächstes unternehmen müssen. In diesem Artikel zeigen wir Ihnen, wie Sie mit CSS eine einfache Schrittleiste erstellen.

Zuerst benötigen wir eine Liste mit Schritten, etwa so:

<ul>
  <li>步骤一</li>
  <li>步骤二</li>
  <li>步骤三</li>
  <li>步骤四</li>
</ul>

Als nächstes müssen wir Stile zur Schrittleiste hinzufügen. Zuerst fügen wir der Liste den folgenden Grundstil hinzu:

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  justify-content: space-between;
}

Dieser CSS-Code entfernt den Standardstil der Liste und stellt sie auf ein Flex-Layout ein. Gleichzeitig setzen wir die Eigenschaft justify-content auf space-between, damit die Listenelemente gleichmäßig im Container verteilt werden.

Als nächstes müssen wir die Listenelemente formatieren und ihnen Kreise und Zahlen hinzufügen. Hier ist der Styling-Code:

li {
  width: 30px;
  height: 30px;
  background-color: #ccc;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  color: #fff;
  position: relative;
}
li:before {
  content: '';
  position: absolute;
  top: 15px;
  left: -50%;
  height: 1px;
  width: 50%;
  background-color: #ccc;
}
li:first-child:before {
  display: none;
}
li.active {
  background-color: #f00;
}
li.active:before {
  background-color: #f00;
}

Darin legen wir die Breite und Höhe für das Listenelement fest und legen es auf einen Kreis fest. Wir legen auch Eigenschaften wie Textausrichtung, Schriftfettigkeit, Farbe und Zeilenhöhe fest. Außerdem haben wir über das CSS-Pseudoelement :before vor jedem Listenelement eine gepunktete Linie eingefügt, um die einzelnen Schritte zu trennen.

Schließlich verwenden wir die Klasse .active, um das Listenelement des aktuellen Schritts zu markieren und ihm durch einen bestimmten Stil einen roten Hintergrund und ein vorderes Symbol hinzuzufügen.

Der endgültige Schrittleistenstil sieht so aus:

Bei Verwendung der Schrittleiste müssen wir nur die .active-Klasse zum entsprechenden Listenelement hinzufügen. Wenn Sie sich beispielsweise gerade im zweiten Schritt befinden, können Sie den Code wie folgt ändern:

<ul>
  <li>步骤一</li>
  <li class="active">步骤二</li>
  <li>步骤三</li>
  <li>步骤四</li>
</ul>

Mit den oben genannten CSS-Stileinstellungen können wir ganz einfach eine Schrittleiste im benutzerdefinierten Stil erstellen, damit Benutzer die aktuelle Schrittleiste besser verstehen und nächste Schritte.

Das obige ist der detaillierte Inhalt vonTrittleiste CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!