Beispiele für die stilvolle Gestaltung von ul li CSS-Listen. Stylen von Zeilennummern (Ziffern) in geordneten Listen ol Tags werden zum Stylen von nummerierten Listen verwendet

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.
   start	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. Mit dem Wert start \u003d "27" wird der Zähler gelöscht 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ß) i (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

   .

   Zum Beispiel:

   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.

         Lassen Sie uns unser Gespräch über die Anfänge von HTML fortsetzen. In diesem Artikel möchte ich darüber sprechen, wie Absätze, Listen und Überschriften im Text erstellt werden. Und auch über einzelne Tags
         und

         ---

         .

         Ich rate Ihnen dringend, die erste Lektion in dieser Reihe sowie einen einführenden Artikel über den Einstieg in das Erlernen von HTML für diejenigen zu lesen, die noch nicht mit ihnen vertraut sind.

         Wir werden nun unser Studium der Tags fortsetzen. Ich gehe davon aus, dass der Leser bereits mit dem Material der obigen Artikel vertraut ist.

         Wie immer ist der Arbeitsplan:

         1. Absätze
         2. Zeilenumbrüche
            
         3. Listen und Listenelemente
         4. Überschriften
         5. Horizontale Lineale

            ---

         Absätze

         Der Text besteht fast immer aus Absätzen. Ein Absatz ist ein Textelement, das einen vollständigen Gedanken enthält.

         In HTML wird ein Absatz bezeichnet, wie aus dem Titel hervorgeht. Der Buchstabe "p" stammt aus dem Wort "Absatz", was nur "Absatz" bedeutet.

         Betrachten wir ein Beispiel:

         Der Text des ersten Absatzes. Es enthält Gedanken. Aber dann endete der Gedanke.
         

         
         

         Ein anderer Gedanke hat bereits begonnen und wir schreiben ihn in einen anderen Absatz.
         

         Wie Sie sehen können, ist die Anwendung von Absätzen sehr einfach und erfordert keine besonderen Kommentare. Wenn wir diesen Code in einem Browser betrachten, sehen wir zwei Zeilen mit einer Leerzeile dazwischen. In russischen Texten ist es üblich, einen Absatz nicht durch eine leere Zeile zu trennen, sondern die erste Zeile nach rechts zu verschieben. Im Internet wird jedoch häufig nur eine solche Formatierung verwendet, weshalb sie häufig auch in russischsprachigen Texten verwendet wird. Wenn dieses Verhalten jedoch nicht zu Ihnen passt, können Sie es mithilfe von CSS ändern.

         Zeilenumbrüche
         

         Manchmal müssen Sie eine Zeile übersetzen, ohne den Gedanken zu beenden, ohne den Absatz zu schließen. Das heißt, gehen Sie einfach zu einer neuen Zeile. Hierfür gibt es ein einziges Tag
         ... Hier ist ein Beispiel für seine Anwendung:

         Der Wind geht fröhlich
         
         Und das Boot drängt
         
         Er rennt in den Wellen zu sich
         Mit erhobenen Segeln.
         

         Dieses Fragment eines Gedichts von A.S. Puschkin half uns, die Aktion des Tags zu veranschaulichen
         ... Ich habe die letzten beiden Zeilen dieses Quatrain absichtlich in eine Codezeile eingefügt, um zu zeigen, dass Zeilen in eine neue Zeile eingeschlossen werden, nicht weil wir Zeilenumbrüche platziert haben, sondern weil wir Tags platziert haben
         ... Dieses Tag ist sehr einfach und bedarf keiner detaillierten Erklärung. Hier beenden wir unsere Diskussion.

         Listen,

         und Listenelemente

         Manchmal müssen Sie im Text etwas auflisten. Zu diesem Zweck werden drei Tags verwendet: ul, ol, li. Alle diese Tags sind Container-Tags, aber das Tag ist immer in einem der Container oder enthalten und macht außerhalb von ihnen keinen Sinn. Der ul-Container wird verwendet, wenn uns die Reihenfolge der aufgelisteten Elemente egal ist und wir uns nicht auf die Reihenfolge konzentrieren möchten, in der sie sich befinden. Das ol-Tag hingegen betont die Reihenfolge der Elemente, indem jede Zeile automatisch nummeriert wird. Betrachten wir ein Beispiel:

         
         
         • Bulka
         
         
         • Kuchen
         
         
         • Laib
         
         
         • Kuchen
         
         

         Auf dem Browserbildschirm sieht dieser Code folgendermaßen aus:

         • Bulka
         • Kuchen
         • Laib
         • Kuchen

         Wenn wir nur das ul-Tag durch das ol-Tag ersetzen, erhalten wir eine nummerierte Liste:

         
         
         1. Bulka
         
         
         2. Kuchen
         
         
         3. Laib
         
         
         4. Kuchen
         
         

         Es sieht jetzt so aus:

         1. Bulka
         2. Kuchen
         3. Laib
         4. Kuchen

         Niemand verbietet es, eine Liste in eine andere zu verschachteln und verschachtelte Listen mit Unterlisten zu bilden:

         
         Werkzeuge:
         
         • Sah
         
         
         • Schraubendreher
           
           
           
           1. Gerade
           
           
           2. Kreuz
           
           
           
           
         
         
         • Bohren
         
         

         Sie müssen ein wenig mit diesen Listen experimentieren, um sich an deren Verwendung zu gewöhnen. Es gibt eine andere Art von Listen, aber sie werden selten verwendet, daher werde ich jetzt nicht darüber sprechen. Vielleicht in einem anderen Artikel.

         Natürlich kann das Erscheinungsbild dieser Elemente wie alles andere bis zur Unkenntlichkeit mit CSS geändert werden.

         Überschriften

         Natürlich helfen Absätze bei der Strukturierung von Dokumenten. Um jedoch großen Text in kleinere logische Teile aufzuteilen, können Sie jeden von ihnen mit einer Beschriftung versehen. Jeder Teil kann mehr Unterteile mit eigenen Überschriften auf niedrigerer Ebene usw. enthalten. Verwenden Sie die Tags, um den Titel festzulegen , wobei "x" eine Zahl von 1 bis 6 ist. Je höher die Zahl, desto niedriger die Überschrift. Das heißt, die Überschrift der obersten Ebene heißt h1, und die unterste Überschrift ist h6. Standardmäßig wird der Text in diesen Überschriften in großer, eingerückter Schrift angezeigt. Dieser Text wird in der gesamten Zeile angezeigt, dh hx-Tags sind blockbasiert. Das h1-Tag hat die größte Schriftart und das h6-Tag die kleinste. In der Regel gibt es maximal ein - zwei h1-Tags der obersten Ebene auf der Seite. Wenn der Pegel abnimmt, nimmt die Anzahl der Tags zu. In seltenen Fällen kann ein Webmaster Text jedoch so aufteilen, dass er Überschriften der Stufen 5 oder 6 benötigt. Sogar Level 4 wird selten benutzt.

         Weniger reden, mehr arbeiten!

         Listen können nummeriert oder nicht nummeriert sein.

         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 jedes Element 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 - Die Farbe des Elementtextes
         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 (Bild im Listenstil: 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 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 die Zeilen, 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?

         Liste mit Aufzählungszeichen 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 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 Bearbeitungsmodus für HTML-Artikel 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 schreibt man sie in HTML-Code? Ein Teil des Codes umrahmt den Anker des Links, und ein weiterer Teil des Codes befindet sich neben der Stelle, an der wir beim Klicken auf den Link abgelegt werden müssen.

         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:

         Wenn Sie die Standardlisten ul und li ändern möchten, wird Sie dieses Thema interessieren. Da hier finden Sie einige originelle Lösungen. Dies wird Ihnen sicherlich dabei helfen, die Standardansicht für die Gestaltung der Listen in eine eindeutige zu ändern, in der der CSS-Stil verwendet wird. Das Plus ist, dass wir in allem nur eine Klasse verwenden, was das Aussehen radikal verändern wird. Zusätzlich zu diesen Parametern können Sie angeben, bei welcher Nummer die Liste beginnen soll. Hier können Sie alles selbst erledigen. Die anfängliche Standardeinstellung für nummerierte Listen ist der erste oder Buchstabe A.

         Basierend auf den Grundlagen werden wir uns nun die Elemente genauer ansehen, die verwendet werden, um verschiedenen Teilen des Entwurfs Struktur und Bedeutung zu verleihen. Wenn jemand es nicht weiß, sind ul und li viel bessere Optionen als einfacher Text, denn wenn der Text umbrochen wird, insbesondere auf Mobilgeräten, wird er perfekt eingerückt und nicht um den Marker gewickelt.

         Listen gelten als eine großartige Möglichkeit, Informationen auf Seiten darzustellen, da sie leicht zu lesen sind und gut aussehen. Viele Leute scheinen zu denken, dass Aufzählungszeichen kleine Bilder sind, aber in Wirklichkeit werden sie alle durch ziemlich einfachen HTML-Code erstellt. Sie können verschiedene Arten von Listen ineinander verschachteln, wenn Sie möchten. Denken Sie daran, sie korrekt zu schließen. In all diesen Listenbefehlen können Sie mit dem gewünschten Text spielen.

         Sie müssen auch wissen, dass Listen anfangs mehrere Elemente enthalten:

         1 ... Ungeordnete Informationen.
         2 ... Bestellte Informationen.
         3 ... Definitionen.

         Erste Schritte mit der Installation:

         1. Option:

         
         
         • Listenpunkt
         
         
         • Einzigartige Liste
         
         
         • Originallisten
         
         
         • ZORNET.RU - Für Webmaster
         
         
         • Eine andere Liste
         
         
         
         CSS

         Ksangelopan (
         Rand: 19px 0 0;
         Polsterung: 0;
         Listenstil: keine;
         Counter-Reset: li;
         }
         .ksangelopan li (
         Rand: 2px fest # 3575ad;
         Hintergrund: # d7dee4;
         Position: relativ;
         Rand unten: 17px;
         Polsterung: 15px 9px;
         }
         .ksangelopan li: schweben (
         Z-Index: 1;
         }
         .ksangelopan li: vor (
         Rand: 2px fest # 2270b3;
         Position: absolut;
         oben: -14px;
         Polsterung: 3px 9px;
         Schriftgröße: 11px;
         Schriftdicke: fett;
         Farbe: # 246eaf;
         Hintergrund: # f2f4f7;
         Gegeninkrement: li;
         Inhalt: Zähler (li);
         -Webkit-Übergangsdauer: 0,4s;
         Übergangsdauer: 0,4 s;
         }
         .ksangelopan li: hover: before (
         Hintergrund: # 2672b3;
         Farbe: # f7f9fb;
         -webkit-transform: translate (-11px, 0);
         -ms-transform: translate (-11px, 0);
         -o-transform: translate (-11px, 0);
         transformieren: translate (-11px, 0);
         }
         .ksangelopan li: nach (
         Inhalt: "";
         Position: absolut;
         Übergangsdauer: 0,3 s;
         -webkit-Übergangseigenschaft: width;
         Übergangseigenschaft: Breite;
         Z-Index: -1;
         Hintergrund: #FFF;
         Höhe: 100%;
         links: 0;
         oben: 0;
         Breite: 0;
         }
         .ksangelopan li: hover: after (
         Breite: 100%;
         }

         
         Dies ist die gesamte Installation.

         2 Zweite Option:

         

         
         
         • Listenpunkt
         
         
         • Einzigartige Liste
         
         
         • Originallisten
         
         
         • ZORNET.RU - Für Webmaster
         
         
         • Eine andere Liste
         
         
         
         CSS

         Beleduzlopamges (
         Rand unten: 8px;
         Polsterung: 0;
         Listenstil: keine;
         Counter-Reset: li;
         }
         .beleduzlopamges li (
         Position: relativ;
         Rand: 2px fest # 195588;
         Hintergrund: # eff3f7;
         Polsterung: 15px 19px 15px 27px;
         Rand: 12px 0 12px 40px;
         -Webkit-Übergangsdauer: 0,3s;
         Übergangsdauer: 0,3 s;
         }
         .beleduzlopamges li: hover (
         Hintergrund: #FFF;
         }
         .beleduzlopamges li: vor (
         Zeilenhöhe: 32px;
         Position: absolut;
         oben: 4px;
         links: -39px;
         Breite: 39px;
         Textausrichtung: Mitte;
         Schriftgröße: 16px;
         Schriftdicke: fett;
         Farbe: # f9f5f5;
         Hintergrund: # 275b88;
         Gegeninkrement: li;
         Inhalt: Zähler (li);
         Übergangsdauer: 0,2 s;
         }
         .beleduzlopamges li: hover: before (
         Breite: 46px;
         }
         .beleduzlopamges li: after (
         Position: absolut;
         links: 0;
         oben: 4px;
         Inhalt: "";
         Höhe: 0;
         Breite: 0;
         Rand: 16px fest transparent;
         Rand-links-Farbe: # 275b88;
         -Webkit-Übergangsdauer: 0,2s;
         Übergangsdauer: 0,2 s;
         }
         .beleduzlopamges li: hover: after (
         Rand links: 6px;
         }

         
         Die mittlere Skala kann unabhängig vom Hauptstil der Site eingestellt werden.

         3 Dritte Option:

         

         
         
         • Skripte für uCoz
         
         
         • Vorlagen für uCoz
         
         
         • Website design
         
         
         • Stile für die Site
         
         
         • CSS-Styling
         
         
         
         CSS

         Nizualisanelag (
         Polsterung: 0;
         Listenstil: keine;
         Counter-Reset: li;
         }
         .nizualisanelag li (
         Position: relativ;
         Polsterung: 9px 17px 17px 25px;
         Rand links: 39px;
         Übergangsdauer: 0,2 s;
         Cursor: Zeiger;
         Schriftdicke: fett;
         Farbe: # 343638;
         }
         .nizualisanelag li: vor (
         Rand: 3px fest transparent;
         Zeilenhöhe: 35px;
         Position: absolut;
         oben: 0;
         links: -29px;
         Breite: 41px;
         Textausrichtung: Mitte;
         Schriftgröße: 14px;
         Schriftdicke: fett;
         Farbe: # 619dce;
         Gegeninkrement: li;
         Inhalt: Zähler (li);
         Übergangsdauer: 0,3 s;
         
         Box-Größe: Border-Box;
         }
         .nizualisanelag li: hover: before (
         Farbe: # 337AB7;
         }
         .nizualisanelag li: after (
         Position: absolut;
         oben: 0;
         links: -29px;
         Breite: 41px;
         Höhe: 41px;
         Rand: 5px fest # 468bd0;
         Randradius: 50%;
         Inhalt: "";
         Opazität: 0,5;
         -webkit-box-sizing: border-box;
         -Moz-Box-Größe: Border-Box;
         Box-Größe: Border-Box;
         }
         .nizualisanelag li: hover: after (
         Animation: 500 ms Easy-In-Out 0s BounceIn;
         Opazität: 1;
         }

         @keyframes bounceIn (
         0% {
         Deckkraft: 0;
         transformieren: scale3d (.3, .3, .3);
         }
         20% {
         Transformation: scale3d (1,3, 1,3, 1,3);
         }
         40% {
         transformieren: scale3d (.9, .9, .9);
         }
         60% {
         Opazität: 1;
         Transformation: scale3d (1,03, 1,03, 1,03);
         }
         80% {
         transformieren: scale3d (.97, .97, .97);
         }
         zu (
         Opazität: 1;
         transformieren: scale3d (1, 1, 1);
         }
         }

         
         Kommt mit schöner Animation.

         4 Vierte Option:

         

         
         
         • Das erste Element für die Site
         
         
         • Zweites Element für die Site
         
         
         • Drittes Element für die Site
         
         
         • Das vierte Element für die Site
         
         
         • Das fünfte Element für die Site
         
         
         
         CSS

         Polsterung: 0;
         Listenstil: keine;
         }
         .kudezamuden li (
         Polsterung: 6px;
         }
         .kudezamuden li: vor (
         Polsterung rechts: 11px;
         Schriftdicke: fett;
         Farbe: # 4979a0;
         Inhalt: "\\ 2606";
         Übergangsdauer: 0,4 s;
         }
         .kudezamuden li: hover: before (
         Farbe: # 235e90;
         Inhalt: "\\ 2605";
         }

         
         Ähnlich wie in früheren Versionen wurde nur das Symbol selbst geändert.

         Im Allgemeinen ist dies eine kleine Auswahl von Listen, die dem Webmaster eine schöne Liste auf dem Portal geben, wo er sie selbst mehr arrangieren kann, als er es sehen möchte.

         Wenn Sie Elemente in eine nummerierte Liste anstelle einer Liste mit Aufzählungszeichen einfügen müssen, wird hier geordnetes HTML verwendet. Diese Liste wird mit dem ol-Tag erstellt. Die Nummerierung beginnt bei eins und erhöht sich für jedes nachfolgende geordnete Listenelement mit einem li-Tag um eins.

         Element

         (aus der englischen "ungeordneten Liste" - "ungeordnete Liste") erstellt eine ungeordnete (ungeordnete) Liste. Typischerweise das Element
         Es wird zum Erstellen solcher Listen verwendet, bei denen das Ändern der Reihenfolge der Elemente in dieser Liste die Bedeutung der Liste nicht wesentlich ändert.

         Etikett

         bezieht sich auf Blockelemente, nimmt also die gesamte ihm zur Verfügung stehende Breite ein, und die Größe der Höhe hängt von der Menge des Inhalts ab.

         Elemente für nummerierte Listen werden mithilfe des Tags definiert

         • Dies kann neben Text auch andere HTML-Elemente (Listen, Bilder, Überschriften, Absätze usw.) enthalten. Standardmäßig werden Listen mit Aufzählungszeichen auf einer Webseite als Liste angezeigt, beginnend mit einem kleinen schwarzen Kreis. Browser fügen beim Anzeigen von Listenelementen links einen kleinen Rand hinzu.

           Hinweis:Wenn zum

           Die CSS-Eigenschaft wird angewendet, dann die Elemente
           • erben diese Eigenschaften.

             Rat:Verwenden Sie zum Ändern des Markertyps die CSS-Eigenschaft "Listenstil" oder die Eigenschaft "Bildstil", um Markierungen durch Bilder zu ersetzen. Verwenden Sie das Tag, um nummerierte Listen zu erstellen

             .

             Syntax

             ...
             • ...
             ...

             Tag beenden

             Erforderlich.

             Attribute

             kompakt In HTML5 veraltet Reduziert Einrückungen und Zeilenabstände. Typ HTML5 Legt das Aussehen der Listenmarkierung fest.

             Verfügbar für diesen Artikel globale Attribute und entwicklungen.

             Standard-Styling

             Die meisten Browser rendern das Element

             mit den folgenden Standard-CSS-Werten:

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

             Unterschiede zwischen HTML 4.01 und HTML5

             Die Attribute compact und type werden in HTML5 nicht unterstützt.

             Anwendungsbeispiel:

             Ungeordnete HTML-Liste:

             Beispiel HTML:

             Versuch es selber
             • Kaffee
             • Tee
             • Kakao

             Spezifikationen

             Spezifikation	Status
             WHATWG HTML Lebensstandard (WHATWG)	Lebensstandard
             HTML 4.01 (W3C)	Empfehlung
             HTML5 (W3C)	Empfehlung
             HTML 5.1 (W3C)	Empfehlung

             Browser-Unterstützung

             Probieren Sie es selbst aus - Beispiele

             So beginnt die Liste mit einer anderen Zahl als 1.