Latest web development tutorials

CSS-Style-Liste (ul)

CSS Listeneigenschaften Rolle ist wie folgt:

  • Legen Sie verschiedene Listenposition wird als eine geordnete Liste markiert
  • Legen Sie verschiedene Listenelement wird als ungeordnete Liste markiert
  • Set Listenelement Marker Bild

Liste

In HTML gibt es zwei Arten von Listen:

  • Ungeordnete Liste - Listenelemente sind mit einer speziellen Grafik markiert (wie schwarze Flecken, kleine Kästen, etc.)
  • Geordnete Liste - die Elemente der Liste sind mit Zahlen oder Buchstaben gekennzeichnet

Mit CSS können Sie den Stil weiter auflisten und können ein Bild Listenelement Marker machen.

Verschiedene Listenelement Marker

list-style-type-Attribut gibt die Art der Listenpunkt Marker ist ::

Beispiele

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

Versuchen »

Einige Werte sind ungeordnete Listen, und einige ist eine geordnete Liste.

Als Bildlistenelement Marker

So geben Sie die Bildliste Artikel Marker, verwenden Sie die list-style-Bildeigenschaft:

Beispiele

ul
{
list-style-image: url('sqpurple.gif');
}

Versuchen »

Das obige Beispiel zeigt nicht das gleiche in allen Browsern, IE und Opera zeigen die Image-Tags als Firefox, Chrome und Safari ein wenig höher.

Wenn Sie das gleiche Bild des Logos in allen Browsern platzieren möchten, sollten Sie eine Browser-Kompatibilität Lösungen verwenden, wie folgt

Browser-Kompatibilität Lösungen

Auch in allen Browsern, wird das folgende Beispiel zeigt die Bild-Tag:

Beispiele

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}

Versuchen »

Erklärt Beispiel:

  • ul:
    • Stellen Sie die list-style-type ist nicht das Listenelement Marker zu löschen
    • Einstellen padding und margin 0px (Browser-Kompatibilität)
  • Alle ul li:
    • Stellen Sie die URL des Bildes, und legen Sie es nur einmal erscheint (keine Wiederholung)
    • Sie müssen die Bildposition (links 0px und eine vertikale 5px) zu lokalisieren
    • Mit padding-left-Attribut auf den Text in der Liste

List - Kurzschrift-Eigenschaft

Sie können eine Liste aller Eigenschaften in einer einzigen Eigenschaft angeben. Dies ist eine Kurzschrift-Eigenschaft genannt.

Verwenden Sie Abkürzungen Eigenschaft auf der Liste werden eine Liste von Stilattribute wie folgt festgelegt:

Beispiele

ul
{
list-style: square url("sqpurple.gif");
}

Versuchen »

Wenn Sie die zusammenfassende Eigenschaft Wert der Bestellung verwenden ist:

  • list-style-type
  • list-style-position (Anleitung finden Sie in der folgenden CSS-Attributtabelle)
  • list-style-image

Wenn diese Werte eine der restlichen Bestellung fehlen noch angegeben, spielt es keine Rolle.

Beispiele

Weitere Beispiele

Alle verschiedenen Listenelement Marker
Dieses Beispiel zeigt alle verschiedenen CSS Listenelement Marker.

Alle CSS Listeneigenschaften

Immobilien Beschreibung
list-style Stenografie Eigenschaft. Eine Liste aller Eigenschaften in einer Anweisung zur Verfügung gestellt
list-style-image Das Bild wird eine Liste der Elemente zu unterzeichnen.
list-style-position Stellen Sie die Position in der Liste der Listenpunkt Marker.
list-style-type Die Art der Listenposition Flagge.