Wie ordne ich Listenelemente horizontal an? Stilvolle Beispiele für das Styling von ul li CSS-Listen Wofür die ul ol li-Tags stehen

Beschreibung

Attribute

Hinweis: Das umgekehrte Attribut wird nur von Chrome und Safari unterstützt.

Start: Legt den ganzzahligen Startwert fest, ab dem die Nummerierung der Elemente in der Liste beginnen soll. Beispiel »Typ: Definiert den Markertyp, der für Listenelemente verwendet wird:

• 1 - Dezimalzahlen (1, 2, 3, 4 ...).
• EIN - Lateinische Buchstaben in alphabetischer Reihenfolge in Großbuchstaben (A, B, C, D ...).
• ein - Lateinische Buchstaben in alphabetischer Reihenfolge in Kleinbuchstaben (a, b, c, d ...).
• ich - römische Großbuchstaben (I, II, III, IV ...).
• ich - Römische Ziffern in Kleinbuchstaben (i, ii, iii, iv ...).
Beispiel "

Etikett

unterstützt auch globale Attribute und Ereignisse

Standardstil

ol (Anzeige: Block; Listenstil-Typ: Dezimal; Rand oben: 1em; Rand unten: 1em; Rand links: 0; Rand rechts: 0; Abstand links: 40px;)

Beispiel

1. Kaffee
2. Tee
3. Milch
50. Kaffee
51. Tee
52. Milch

Der einzige Unterschied besteht darin, dass dieses Tag ausschließlich für Nummerierungslisten vorgesehen ist. Der Name des Tags stammt von der englischen Abkürzung "Ordered List" - Nummerierte Liste.

Tag-Syntax

1. Gegenstand 1
2. Punkt 2
3. Punkt 3
4. ...

Wobei das Attribut type \u003d "value" die folgenden Werte annehmen kann

• A - setzt Markierungen in Form von lateinischen Großbuchstaben (A, B, C ..);
• a - setzt Markierungen in Form von lateinischen Kleinbuchstaben (a, b, c ..);
• I - setzt Markierungen in Form großer römischer Ziffern (I, II, III, IV ..);
• i - spezifiziert Markierungen in Form kleiner römischer Ziffern (i, ii, iii, iv ..);
• 1 (Standard) - setzt Markierungen in Form von arabischen Ziffern (1, 2, 3 ..);

Das Attribut start \u003d "value" legt den Anfangswert (Startwert) des Berichts fest.

Das umgekehrte Attribut gibt eine umgekehrte Anzahl an (falls erforderlich).

Etikett

erfordert die obligatorische Verwendung eines End-Tags

Ein Paar-Tag wird verwendet, um Listenelemente zu bilden

1. ... Zwischen den öffnenden und schließenden Tags befinden sich einzelne Wörter, Phrasen, Absätze, Bilder, Codestücke und vieles mehr, die den Inhalt einer Liste mit Aufzählungszeichen darstellen.

   Hinweis

   Innerhalb der Liste können Sie das Konto in Ihr eigenes ändern. Dafür gibt es ein spezielles Attribut value \u003d "" für das Tag

2. dem ein numerischer Wert zugeordnet ist. beispielsweise

   1. Gegenstand 1
   10. Punkt 2
   11. Punkt 3

   Beispiele mit nummerierten Listen in HTML (

   )

   Beispiel 1. Eine nummerierte HTML-Liste in Form von lateinischen Buchstaben

   Beispiel mit Großbuchstaben

   1. Gegenstand 1
   2. Punkt 2
   3. Punkt 3

   1. Gegenstand 1
   2. Punkt 2
   3. Punkt 3

   Beispiel mit Kleinbuchstaben

   1. Punkt # 10
   2. Punkt # 11
   3. Punkt # 12

   So sieht es auf der Seite aus:

   1. Gegenstand 1
   2. Punkt 2
   3. Punkt 3

   Beispiel 2. Nummerierte HTML-Liste in römischen Buchstaben

   Beispiel mit Großbuchstaben

   1. Gegenstand 1
   2. Punkt 2
   3. Punkt 3

   So sieht es auf der Seite aus:

   1. Gegenstand 1
   2. Punkt 2
   3. Punkt 3

   Beispiel mit Kleinbuchstaben

   1. Gegenstand 1
   2. Punkt 2
   3. Punkt 3

   So sieht es auf der Seite aus:

   1. Gegenstand 1
   2. Punkt 2
   3. Punkt 3

   Beispiel 3. Nummerierte HTML-Liste unterschiedliche Startposition

   Ein Beispiel, das die Funktionen des Startattributs zeigt, mit dem Sie den Startwert des Zählers festlegen können.

   50. Gegenstand 1
   51. Punkt 2
   52. Punkt 3

   So sieht es auf der Seite aus:

   1. Gegenstand 1
   2. Punkt 2
   3. Punkt 3

   Beispiel 4. Ändern des Kontos in nummerierten HTML-Listen

   Unten finden Sie ein Beispiel mit der Möglichkeit, die Zählerwerte mithilfe des Wertattributs zu ändern, wenn neue Elemente in Tags angezeigt werden

3. .

   10. Gegenstand 1
   11. Punkt 2
   100. Punkt 3
   101. Punkt 4

   So sieht es auf der Seite aus:

   1. Gegenstand 1
   2. Punkt 2
   3. Punkt 3
   4. Punkt 4

   Beispiel 5. Umkehrbare nummerierte Liste in HTML

   Unten finden Sie ein Beispiel für eine Liste mit umgekehrten Nummern (Zählen in umgekehrter Reihenfolge).

   10. Gegenstand 1
   11. Punkt 2
   12. Punkt 3
   13. Punkt 4

   So sieht es auf der Seite aus:

   1. Gegenstand 1
   2. Punkt 2
   3. Punkt 3
   4. Punkt 4

   Listen können nummeriert und nicht nummeriert werden.

   Nummerierte Listen werden per Code ausgegeben:

   Liste mit Zahlen
   1. absatz 1
   2. punkt 2
   3. punkt 3

   Nicht nummerierte Listen werden vom Code ausgegeben:

   Liste mit Häkchen oder anderen Symbolen
   • Absatz 1
   • Absatz 1
   • Absatz 1

   Jedes Element in einer Liste ist in einem Li-Tag enthalten. Alle Listenelemente werden in ein gemeinsames ul- oder ol-Tag eingeschlossen. Die Stile dieser Tags werden in das Stylesheet geschrieben.

   Für jedes Tag werden bestimmte visuelle Stile zugewiesen. Sie zeigen Einrückungen aus dem Text an.

   Für eine nummerierte Liste sind für jeden Artikel Nummerierungsstile vorgeschrieben.

   Arabische Standardzahlen werden durch den Dezimalwert beschrieben.

   listenstil-Typ: dezimal; /*Arabische Ziffern*/

   Für eine Liste mit Aufzählungszeichen geben Sie den Zeichenstil an - Quadrate oder Kreise.

   listenstil-Typ: Kreis; / * Kreise * /
   Listenstil-Typ: Quadrat; / * Quadrate * /

   Jedem Menüpunkt kann ein Bild zugewiesen werden.

   listenstil-Bild: URL ("Pfad zum Bild");

   Normalerweise wird in Vorlagen eine nummerierte Liste mit einfachen Zahlen formatiert und nicht nummeriert - mit schwarzen Quadraten und Kreisen. Es ist langweilig und ausdruckslos. Lassen Sie uns das beheben.
   

   Wo sind die Listenstile in der Twenty Eleven-Vorlage?

   Öffnen Sie das Stylesheet style.css. Suchen Sie den Abschnitt / * Textelemente * /

   Der Standardcode sieht folgendermaßen aus:

   Wie arrangiere ich eine nummerierte Liste?

   Nummerierte Liste mit Hintergrund

   Schauen Sie sich dieses schöne nummerierte Listendesign an.

   Gefällt? Lass uns das nochmal machen.

   Finden Sie Stile für das alte Tag. Fügen Sie neue Eigenschaften hinzu.

   Ol (Polsterung: 0px 0 0 20px; Rand: 0,5em 0 1,571em 1,9em; Farbe: # 2E2E2E; Listenstil: keine; Schriftart: 15px / 17px Verdana, Arial, Helvetica, serifenlos; Z-Index : 2; Counter-Reset: Punkt;) ol li (Rand-unten: 4px; Linienhöhe: 1,6; Farbe: # 2E2E2E; Position: relativ;) ol li: vor (Rand-unten: 4px; Gegen-Inkrement: Punkt 1; Linienhöhe: 1,6; Höhe: 24 Pixel; Rand links: -36 Pixel; Links: 0 Pixel; Breite: 24 Pixel; Rand oben: 1 Pixel; Hintergrund: # BDC3C7; Inhalt: Zähler (Punkt); Textausrichtung: Mitte; Position: absolut; Schriftgröße: fett;)

   Damit Sie verstehen, wo Sie Änderungen für Ihr Design vornehmen müssen, nehmen wir diesen Code in die Regale.

   listenstil-Typ: keine; - Deaktiviert die Ausgabe von Standardziffern
   Counter-Reset: Punkt; - setzt eine Variable für den Nummerierungszähler
   Position: relativ; - Platziert die Nummerierung in der Nähe der Punkte

   before ist ein Pseudoelement für das ol li-Tag. Hat die folgenden Stile:
   Inhalt: Zähler (Punkt); - Zeigt den Wert einer Variablen an
   Gegeninkrement: Punkt 1; - erhöht den Zähler um 1
   Position: absolut;
   Hintergrund: # BDC3C7; - Hintergrund für Zahlen (Hintergrund kann mit Farbe oder einem schönen Symbol eingestellt werden
   Rand - Ränder
   Polsterung - Polsterung
   Farbe - Elementtextfarbe
   Hintergrund - Hintergrund
   Textausrichtung - Textausrichtung
   Schriftgröße - Gewicht (Gewicht) der Schrift

   In Ihren Stilen können Sie beliebige Farben, Ausrichtungen, Schriftgrößen und Einrückungen festlegen.

   Nummerierte Liste mit einem eindeutigen Bild für jeden Artikel

   Eine Seite für Frauen hat einige sehr attraktive nummerierte Listen.

   Wie wird das umgesetzt? Schauen wir uns den folgenden Code an:

   / * erste Nummer * / ol li: erstes Kind (Listenstil-Bild: URL (Pfad zum Bild mit Nummer 1);) / * zweite Nummer * / ol li: n-tes Kind (2n) (Listenstil- Bild: URL (Pfad zum Bild mit Nummer 2);) / * dritte Nummer * / ol li: n-tes Kind (3n) (Listenstil-Bild: URL (Pfad zum Bild mit Nummer 3);) / * vierte Nummer * / ol li: n-tes Kind (4n) (Listenstil-Bild: URL (Pfad zum Bild mit der Nummer 4);) / * Als nächstes schreiben wir auf die gleiche Weise nur für die folgenden Artikelnummern * /

   Im Code einer solchen nummerierten Liste müssen Sie alle Artikelnummern auflisten und jedem von ihnen ein eindeutiges Symbol zuweisen.

   Wenn Sie in Listen in Artikeln bis zu 20 nummerierte Elemente verwenden, müssen Sie die Pseudoklasse des n-ten Kindes (An) 20 Mal registrieren. Damit ist der letzte in den Stilen die Pseudoklasse des n-ten Kindes (20n).

   Suchen Sie im Stylesheet nach den Linien, die das Erscheinungsbild der nummerierten Liste (ol li tags) beschreiben.

   Fügen Sie die Pseudoklasse des ersten Kindes hinzu. Kopieren Sie es einmal und fügen Sie es ein. Ändern Sie dann diese Eigenschaft in n-tes Kind (An) und kopieren Sie so viele Zahlen, wie Ihr Symbol haben soll. Artikelnummern hinzufügen.

   Fügen Sie für jede Zahl eine Bildeigenschaft im Listenstil mit einem eigenen eindeutigen Symbol hinzu.

   Wenn sich die Symbole auf der Site weit von den Absätzen entfernt befinden oder diese überlappen, müssen Sie die Ausrichtung und Einrückungen von digitalen Symbolen oder Absatztexten bearbeiten.
   

   Wie ordne ich eine Liste mit Aufzählungszeichen (nicht nummeriert) an?

   Aufzählungsliste ul li mit abwechselnden Symbolen

   Diese Liste mit Aufzählungszeichen hat mir sehr gut gefallen.

   Ul (Polsterung: 11px 0 5px 0;) ul li (Polsterung links: 32px; Rand unten: 10px; Schriftart: normal 15px Verdana, serifenlos; Farbe: # 2E2E2E; Linienhöhe: 1,6; Rand unten: 1px gestrichelt #ccc; Polsterung unten: 10px;) ul li: vorher (Inhalt: ""; Position: absolut; Breite: 27px; Höhe: 24px; Rand links: -35px; Rand oben: -2px; Hintergrund: url ("images / sprite.jpg") 0px 2px no-repeat; Listenstil-Typ: Kreis;) ul li: n-tes Kind (2n): vor (Inhalt: ""; Position: absolut; Breite: 27px; Höhe: 43px; Rand-links: -35px; Rand-oben: -2px; Hintergrund: URL ("images / sprite.jpg") 0px -17px keine Wiederholung; Listenstil-Typ: Kreis;)

   Anstelle des Standardstils vom Typ Listenstil können Sie die Eigenschaft "Pfad zum Symbol" zuweisen - Listenstil-Bild: URL. Aber dann müssen Sie den äußeren linken Rand von den Rändern der Site aus registrieren - ohne ihn werden die Symbole nicht angezeigt, sie gehen über den Inhaltsbereich hinaus.

   Für das Experiment können Sie Einrückungen zuweisen:

   Ul li (Listenstil-Bild: URL (images / radio.png); Rand links: 30px;)

   Der Wechsel der Symbole kann mit der Eigenschaft nth-child (An) festgelegt werden. Das obige Beispiel verwendet das vorhergehende Pseudoelement.

   Der Code enthält ein Pseudoklassen-n-tes Kind (2n). Sein Wert ist 2. Es stellt sich heraus, dass jedes gerade Element ein anderes Symbol hat. Wenn Sie anstelle von 2n 2n + 1 schreiben, fällt das andere Symbol auf ungerade Punkte.

   Sie können für jedes Element in der Liste einen Unterstrich setzen. In dem gezeigten Beispiel sind Elemente mit einer gepunkteten Linie unterstrichen.

   Außerdem können jedem Element Rahmen, Hintergrund und Symbole zugewiesen werden. Sei einfach nicht zu schlau. Unsere Aufgabe ist es nicht, alle mit einem ausgefallenen Design zu besiegen, sondern die Qualität der Wahrnehmung von Inhalten zu verbessern.
   

   Wie werden mehrere Listen mit unterschiedlichem Design auf einer Seite angezeigt?

   Manchmal müssen Sie mehrere Listen mit unterschiedlichen Stilen platzieren.

   Wenn Sie gemeinsame Stile zuweisen, wird allen Listen das gleiche Erscheinungsbild zugewiesen. Verschiedene Listen können angezeigt werden, wenn Sie dem ol- oder ul-Tag eine separate ID zuweisen und diese im HTML-Artikelbearbeitungsmodus registrieren. Nun, im Stylesheet für diese ID müssen Sie separate Stile registrieren.

   Hier ist zum Beispiel ein schönes Layout für den Inhalt:

   In HTML schreiben Sie die Liste wie folgt:

   Inhalt
   1. absatz 1
   2. punkt 2
   3. punkt 3

   In CSS würden Sie Stile wie folgt schreiben:

   Ol # sod (Polsterung: 0px 20px 10px 51px; Rand: 0,5em 0 0em 1em; Farbe: # 2E2E2E; Listenstil-Typ: keine; Hintergrund: # f1f4f5; Rand links: # BDC3C7 4px durchgehend; Anzeige: Inline- block;) ol # sod li () ol # sod li: vorher (Schriftgröße: normal! wichtig)

   Der neue Stil unterscheidet sich vom Haupt-Tag: Hintergrund, Anzeigestil, Zeile links vom Inhalt.

   Durch die Verwendung mehrerer Listen mit unterschiedlichem Design im Text wird die Darstellung von Informationen noch interessanter. Wenn Sie Elemente auflisten, können Sie einige Symbole und beim Auflisten von Aktionen andere festlegen. Hier ist das Design nur durch Ihre Vorstellungskraft begrenzt.

   Diese Methoden sind auch beim Entwerfen von Menüelementen, Kategorien und anderen Elementen der Site anwendbar.
   

   Wie erstelle ich Ankerlinks in einer Inhaltsliste?

   Wie schreibe ich sie in HTML-Code? Ein Stück Code umrahmt den Anker des Links, und ein weiteres Stück Code befindet sich neben der Stelle, an der wir abgelegt werden müssen, wenn wir auf den Link klicken.

   Inhalt
   1. Überschrift 1
   2. Überschrift 2
   3. Überschrift 3

   Und im Text des Artikels müssen Sie so schreiben:

   Überschrift 1 ... Überschrift 2 ... Überschrift 3 ...

   Vielleicht korrigieren mich erfahrenere Webmaster in etwas. Ich empfehle nur, was ich selbst in der Praxis versucht habe.

   Wenn Sie noch Fragen haben, freue ich mich, diese in den Kommentaren zu sehen.

   Ageeva Veronika.

   Vielleicht interessieren Sie sich auch für:

   HTML-Tags

   Bedeutung und Anwendung

   Eine nummerierte (geordnete) Liste gilt für Artikel, die in einer bestimmten Reihenfolge folgen. Eine nummerierte Liste beginnt mit einem Tag

   (kurz für Englisch bestellliste - Bestellliste). Jedes Listenelement beginnt mit einem Tag
   1. (Listenpunkt).

      Browser-Unterstützung

      Attribut			Oper		IExplorer	Kante
      starten, tippen	Ja	Ja	Ja	Ja	Ja	Ja
      rückgängig gemacht	Ja	Ja	Ja	Ja	Nein	Nein

      Attribute

      Attribut	Wert	Beschreibung
      kompakt	kompakt	Wird in HTML5 nicht unterstützt. Gibt an, dass die Liste kleiner als die normale Größe sein sollte (Zeilenhöhe: 80%). Verwenden Sie CSS anstelle dieses Attributs.
      	rückgängig gemacht	Gibt an, dass die Reihenfolge in einer nummerierten (geordneten) Liste absteigend sein sollte. Das Attribut wird von Internet Explorer- und Edge-Browsern nicht unterstützt.
      anfang	nummer	Bestimmt den Startwert einer geordneten (geordneten) Liste. Werte müssen ganze Zahlen sein, negative Werte sind zulässig. Bei Verwendung mit Buchstaben (Typ \u003d "A" und Typ \u003d "a") ist die im Attributwert angegebene Zahl die Ordnungszahl des Buchstabens im Alphabet. Zum Beispiel stimmt start \u003d "4" mit dem Buchstaben überein "D" und die Liste beginnt damit. Bei Verwendung des Wertes start \u003d "27" wird der Zähler auf Null zurückgesetzt und die Liste wird zweistellig ("27" \u003d "AA", "28" \u003d "AB", "29" \u003d "AC" ...).
      art	1 (Default) Ein großer) a (Kleinbuchstaben) Ich (römisch groß) ich (römisch klein)	Bestimmt die Art des Aufzählungszeichens, das beim Erstellen einer nummerierten (geordneten) Liste verwendet wird.

      Anwendungsbeispiel

      1. Erster Punkt Zweiter Punkt
      2. Dritter Punkt

      Auf der Seite sieht es so aus:

      1. Erster Punkt.
      2. Zweiter Punkt.
      3. Dritter Punkt.

      Wenn die Liste mit einer bestimmten Nummer beginnen soll (nicht mit 1), müssen Sie das Startattribut für das Tag angeben

      .

      Beispielsweise:

      Ein weiteres interessantes Attribut ist type, mit dem Sie eine alphabetische Nummerierung ("A" - groß, "a" - Kleinbuchstaben) oder eine Nummerierung aus römischen Ziffern ("I" - in Großbuchstaben, "i" - in Kleinbuchstaben) angeben können.

      Stellen Sie sich ein Beispiel vor, in dem alle möglichen Werte für das Typattribut (außer dem Standardwert) angezeigt werden:

      >
      1. Erster Punkt Zweiter Punkt
      2. Dritter Punkt
      >
      1. Erster Punkt Zweiter Punkt
      2. Dritter Punkt
      >
      1. Erster Punkt Zweiter Punkt
      2. Dritter Punkt
      >
      1. Erster Punkt Zweiter Punkt
      2. Dritter Punkt

      Ich mache Sie darauf aufmerksam, dass es erlaubt ist, nummerierte (geordnete) Listen zu bilden, die in anderen nummerierten Listen (innerhalb eines Listenelements) verschachtelt sind

      3. ):
         1. Erster Punkt
            1. Erster Punkt Zweiter Punkt
            2. Dritter Punkt
            Zweiter Punkt
            3. Dritter Punkt

            Auf der Seite sieht es so aus.

            HTML-Listen werden verwendet, um verwandte Informationen zu gruppieren. Es gibt drei Arten von Listen:

            liste mit Aufzählungszeichen —

            - jedes Element der Liste
            • markiert mit einem Marker,
              nummerierte Liste —
              - jedes Element der Liste
              1. markiert mit einer Nummer,
                 definitionsliste - - besteht aus Termpaaren
                 —
                 Definition.

                 Jede Liste ist ein Container, der Listenelemente oder Begriffsdefinitionspaare enthält. Listenelemente verhalten sich wie Blockelemente, stapeln sich untereinander und nehmen die gesamte Breite des Containerblocks ein. Jedes Listenelement verfügt über ein zusätzliches Feld an der Seite, das nicht am Layout beteiligt ist.

                 Erstellen von HTML-Listen

                 1. Liste mit Aufzählungszeichen

                 Liste mit Aufzählungszeichen ist eine ungeordnete Liste (aus der englischen ungeordneten Liste)... Erstellt mit einem gepaarten Tag

                 ... Die Markierung eines Listenelements ist eine Beschriftung, beispielsweise ein ausgefüllter Kreis.

                 Browser fügen dem Listenfeld standardmäßig die folgende Formatierung hinzu:

                 Jedes Listenelement wird mit einem Paar-Tag erstellt

              2. (aus dem englischen Listeneintrag).
              verfügbar.
              • Microsoft
              • Google
              • Apfel
              Zahl: 1. Liste mit Aufzählungszeichen

              2. Nummerierte Liste

              Nummerierte Liste wird mit einem gepaarten Tag erstellt. Jedes Listenelement wird auch mit dem Element erstellt

            • ... Der Browser nummeriert die Elemente automatisch in der richtigen Reihenfolge. Wenn Sie ein oder mehrere Elemente einer solchen Liste löschen, werden die restlichen Zahlen automatisch neu berechnet.

              Das Listenfeld enthält auch Standardbrowser-Stile:

            • das Wertattribut ist verfügbar, mit dem Sie die Standardnummer für das ausgewählte Listenelement ändern können. Zum Beispiel, wenn Sie für das erste Element in der Liste festgelegt haben
            • Dann wird der Rest der Nummerierung relativ zum neuen Wert neu berechnet.

              Für Tag

              Folgende Attribute stehen zur Verfügung:
              Tabelle 1. Tag-Attribute

              Attribut	Beschreibung, akzeptierter Wert
              rückgängig gemacht	Durch das umgekehrte Attribut wird die Liste in umgekehrter Reihenfolge angezeigt (z. B. 9, 8, 7 ...).
              Anfang	Das Attribut start legt den Anfangswert fest, ab dem die Nummerierung beginnt, z. B. die Konstruktion Dem ersten Artikel wird die Seriennummer "10" zugewiesen. Sie können auch gleichzeitig die Art der Nummerierung angeben, z. .
              Art	Das type-Attribut gibt die Art der Markierung an, die in der Liste verwendet werden soll (als Buchstaben oder Zahlen). Akzeptierte Werte: 1 - Standardwert, Dezimalzahl. A - Nummerierung der Liste in alphabetischer Reihenfolge, Großbuchstaben (A, B, C, D). a - Nummerierung der Liste in alphabetischer Reihenfolge, Kleinbuchstaben (a, b, c, d). I - Nummerierung in römischen Großbuchstaben (I, II, III, IV). i - Nummerierung in römischen Kleinbuchstaben (i, ii, iii, iv).

              1. Microsoft
              2. Google
              3. Apfel
              Zahl: 2. Nummerierte Liste

              3. Liste der Definitionen

              Definitionslisten werden mit dem Tag erstellt

              ... Das Tag wird verwendet, um einen Begriff hinzuzufügen
              und um ein Definitions-Tag einzufügen
              .

              Das Definitionslistenfeld enthält die folgenden Standardbrowserstile:

              Für Tags

              ,

              und

              verfügbar.

              Hersteller:

              Petr Tochilin

              Besetzung:

              Andrey Gaidulyan

              Alexey Gavrilov

              Vitaly Gogunsky

              Mariya Kozhevnikova

              
              Zahl: 3. Liste der Definitionen

              4. Verschachtelte Liste

              Oft reichen die Funktionen einfacher Listen nicht aus. Wenn Sie beispielsweise ein Inhaltsverzeichnis erstellen, können Sie nicht darauf verzichten verschachtelte Elemente... Das Markup für die verschachtelte Liste lautet wie folgt:

              • Absatz 1.
              • Punkt 2.
                • Unterabschnitt 2.1.
                • Unterabschnitt 2.2.
                  • Unterabschnitt 2.2.1.
                  • Unterabschnitt 2.2.2.
                • Unterabschnitt 2.3.
              • Punkt 3.

              
              Zahl: 4. Verschachtelte Liste

              5. Mehrstufige nummerierte Liste

              Eine geschichtete Liste wird verwendet, um Listenelemente auf verschiedenen Ebenen mit unterschiedlichen Einzügen anzuzeigen. Das Markup für eine mehrstufige nummerierte Liste wäre wie folgt:

              1. absatz
              2. absatz
                 1. absatz
                 2. absatz
                 3. absatz
                    1. absatz
                    2. absatz
                    3. absatz
                 4. absatz
              3. absatz
              4. absatz

              Dieses Standard-Markup erstellt eine neue Nummerierung, beginnend mit einer für jede verschachtelte Liste. Um eine verschachtelte Nummerierung vorzunehmen, müssen Sie die folgenden Eigenschaften verwenden:
              Counter-Reset setzt einen oder mehrere Zähler zurück und setzt einen Wert zum Zurücksetzen;
              Gegeninkrement gibt den Zählerinkrementwert an, d.h. Mit welchem \u200b\u200bSchritt wird jeder nachfolgende Artikel nummeriert?
              Inhalt - Der generierte Inhalt. In diesem Fall ist er für die Anzeige der Nummer vor jedem Element in der Liste verantwortlich.

              Ol (/ * entferne die Standardnummerierung * / list-style: none; / * Identifiziere den Zähler und gib ihm einen Namen li. Der Zählerwert wird nicht angegeben - standardmäßig ist er 0 * / counter-reset: li;) li: before (/ * Wir definieren das zu nummerierende Element - li. Das vorhergehende Pseudoelement gibt an, dass der mithilfe der content-Eigenschaft eingefügte Inhalt vor den Listenelementen platziert wird. Außerdem wird der Wert des Zählerinkrements festgelegt (Standard ist 1). * / Counter-increment: li; / * Die content-Eigenschaft zeigt die Nummer des Listenelements an. Counts () bedeutet, dass der generierte Text der Wert aller Zähler mit diesem Namen ist. Ein Anführungszeichen fügt einen Trennungszeitraum zwischen Zahlen hinzu, und vor dem Inhalt jedes Listenelements wird ein Punkt mit einem Leerzeichen hinzugefügt. Zähler (li, ".") ".";)
              Zahl: 5. Mehrstufige nummerierte Liste