LabEx
LoginBeitreten

Genestete Listenzähler mit CSS

Beginner

This tutorial is from open-source community. Access the source code

Einführung

In diesem Lab werden wir die Verwendung von CSS-Zählern untersuchen, um benutzerdefinierte Listenzählungen zu erstellen. Insbesondere werden wir lernen, wie man Zählervariablen initialisiert und inkrementiert, und wie man den Wert dieser Variablen mit der counters()-Funktion anzeigt. Am Ende dieses Labs sollten Sie in der Lage sein, geschachtelte Listenzählungen zu erstellen und das Erscheinungsbild von Listelementen mit CSS anzupassen.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 100% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Zähler

index.html und style.css wurden bereits in der VM bereitgestellt.

Um einen benutzerdefinierten Listenzähler zu erstellen, der geschachtelte Listenelemente berücksichtigt, folgen Sie diesen Schritten:

  1. Verwenden Sie counter-reset, um eine Variable Zähler (Standardwert 0) zu initialisieren, wobei der Name der Wert des Attributs ist (z.B. counter).
  2. Verwenden Sie counter-increment auf der Variablen Zähler für jedes zählbare Element (z.B. jedes <li>).
  3. Verwenden Sie counters(), um den Wert jeder Variablen Zähler als Teil des content des ::before-Pseudo-Elements für jedes zählbare Element (z.B. jedes <li>) anzuzeigen. Der zweite Wert, der an ihn übergeben wird ('.'), fungiert als Trennzeichen für geschachtelte Zähler.

Hier ist ein Beispiel für HTML-Code:

<ul>
  <li>Listenelement</li>
  <li>Listenelement</li>
  <li>
    Listenelement
    <ul>
      <li>Listenelement</li>
      <li>Listenelement</li>
      <li>Listenelement</li>
    </ul>
  </li>
</ul>

Und hier ist der CSS-Code, um den benutzerdefinierten Listenzähler anzuwenden:

ul {
  counter-reset: counter;
  list-style: none;
}

li::before {
  counter-increment: counter;
  content: counters(counter, ".") " ";
}

Bitte klicken Sie auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Zähler-Lab abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.