Listenstil. CSS-Design: Zähmungslisten Ul li Bullets

Ul li (Rand: 2px fest # ff0000;)

Wenn Sie jetzt schauen, befindet sich Ihre Bildmarkierung außerhalb des Listenelements, genau des Rahmens, den wir oben erstellt haben. Daher muss sich der Marker manchmal innerhalb des Listenelements befinden. Dafür gibt es eine Eigenschaft listenstil-Position welches anfänglich auf eingestellt ist draußen Setzen Sie also Markierungen außerhalb des Elements.

Verwenden Sie den Wert, um die Markierung in das Element einzubetten innerhalb ... Wenn Sie diese Eigenschaft nun auf value setzen innerhalb , dann befindet sich die Markierung innerhalb des Listenelements und der rote Rahmen zeigt uns dies deutlich.

Ul (Listenstil-Bild: URL (../ Bilder / Name des Markers image.jpg); Listenstil-Position: innen;) ul li (Rand: 2px fest # ff0000;)

So funktionieren diese drei Eigenschaften. Es gibt auch eine Kurznotation, die alle diese Eigenschaften kombiniert.

Das heißt, die Eigenschaft wird angegeben listenstil und dann in der Reihenfolge die Werte des Markertyps, der Markerposition und, falls erforderlich, des Pfades zum Bild, das der Marker sein wird. Und wir bekommen folgendes Bild:

Ul (Listenstil: Inside URL (../ images / Name des Markers image.jpg);)

Auf diese Weise wird eine kurze Version der Regeln für das Erscheinungsbild der Listen geschrieben. Dieser Eintrag besagt, dass sich der Marker innerhalb des Elements befinden muss und der Marker das gleiche Bild sein wird

Das ist alles mit den Listen, aber nehmen Sie sich etwas mehr Zeit für die Listen, aber üben Sie sich mit der Installation verschiedener Marker, fühlen Sie, wie alles funktioniert. IM demo Es werden Optionen für Markierungseinstellungen angezeigt, mit denen Sie im Vergleich die Richtigkeit Ihrer Arbeit überprüfen können.

CSS-Listen - eine Reihe von Eigenschaften, die für die Gestaltung von Listen verantwortlich sind. Die Verwendung von HTML-Listen ist beim Erstellen von Site-Navigationsleisten sehr verbreitet. Listenelemente repräsentieren eine Sammlung von Blockelementen.

Mit Standard-CSS-Eigenschaften können Sie Ändern Sie das Erscheinungsbild der Listenmarkierung, bild für Marker hinzufügen, und auch Ändern Sie die Position der Markierung... Die Höhe des Markierungsblocks kann mit der Eigenschaft line-height festgelegt werden.

Styling-Listen mit CSS-Stilen

1. Listenmarkertyp Listenstil-Typ

Die Eigenschaft ändert den Typ des Markers oder entfernt den Marker für Listen mit Aufzählungszeichen und Nummern. Vererbt.

Syntax

Ul (Listenstil-Typ: keine;) ul (Listenstil-Typ: Quadrat;) ol (Listenstil-Typ: keine;) ol (Listenstil-Typ: Lower-Alpha;) Zahl: 1. Ein Beispiel für die Gestaltung von Listen mit Aufzählungszeichen und Nummern

2. Bilder für Listenelemente im Listenstil

Sie können Bilder und Verlaufsfüllungen als Markierung für Listenelemente verwenden. Vererbt.

Syntax

Ul (Listenstil-Bild: URL ("images / romb.png");) ul (Listenstil-Bild: linearer Farbverlauf (# FF7A2F 0, # FF7A2F 50%, # FFB214 50%);)
Zahl: 2. Entwerfen Sie eine Liste mit Aufzählungszeichen anhand eines Bildes
Zahl: 3. Stylen einer Liste mit Aufzählungszeichen mit einem Farbverlauf

3. Position der Listenmarkierung Listenstil-Position

Diese Eigenschaft bietet die Möglichkeit, die Markierung außerhalb oder innerhalb des Inhalts des Listenelements zu positionieren. Vererbt.

Wilkommen auf meinem Blog. Heute möchte ich auf das Thema eingehen, wie Markierungen aus Listenelementen mit Aufzählungszeichen (ul li) über CSS entfernt werden können, da sie häufig nicht benötigt werden und nur das Design der Website beeinträchtigen.

Standardmarkierungen entfernen

Manchmal müssen Sie sie nur entfernen. Zum Beispiel beim Dekorieren eines Menüs oder etwas anderem. Die Eigenschaft list-style-type oder shorthand list-style ist für die Anzeige von Markierungen verantwortlich. Der Standardwert ist circle, ein schwarz gefüllter Kreis. Um es zu entfernen, müssen Sie nur so schreiben:

Ul (
Listenstil-Typ: keine;
}

Ul (
Listenstil: keine;
}

Beachten Sie, dass die Eigenschaft im Allgemeinen in die gesamte Liste und nicht in die einzelnen Elemente geschrieben wird. Es ist sehr wichtig. Mit dem obigen Eintrag werden Aufzählungszeichen aus allen Einträgen auf Ihrer Website entfernt. Möglicherweise haben Sie jedoch mehrere Listendesigns.

In diesem Fall helfen Klassen, mit ihrem Styling fertig zu werden. Sie legen einfach die Stilklasse für die erforderlichen Listen auf und entwerfen sie.

So platzieren Sie Ihr Markierungsbild

Ja, ja, mit CSS können Sie Ihren eigenen, viel attraktiveren Marker erstellen. Sie kann auch mit der Eigenschaft list-style-image oder einfacher mit list-style festgelegt werden. Der Wert in Klammern enthält den Pfad zur Datei. Davor müssen Sie das URL-Schlüsselwort eingeben.

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

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%;
}

2 Zweite Option:

• Listenpunkt


• Einzigartige Liste


• Originallisten


• ZORNET.RU - Für Webmaster


• Eine andere Liste

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;
}

3 Dritte Option:

• Skripte für uCoz


• Vorlagen für uCoz


• Website design


• Stile für die Site


• CSS-Styling

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);
}
}

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

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";
}

Im Allgemeinen handelt es sich hierbei um eine kleine Auswahl von Listen. Dadurch kann der Webmaster eine schöne Liste auf dem Portal erstellen, in der er sie selbst so anordnen kann, wie er sie 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.