Wie Sie Bilder in Listen für HTML5 und CSS3 Programmierung verwenden

Es ist nicht ganz ein Hintergrund, aber Sie können auch Bilder für die Listenelemente für HTML5 und CSS3 Webseite verwenden. Manchmal kann man für Ihre Listen irgendeine Art von speziellen Kugel wollen.

bild0.jpg

Auf dieser Seite haben mehrere Sorten von Paprika gelistet. Für diese Art der Liste, ist eine benutzerdefinierte Pfeffer Kugel genau das Richtige. Natürlich ist CSS die Antwort:

listImages.html

My Favorite Peppers

  • Grün
  • Habenero
  • Arrivivi Gusano

Das list-style-image Attribut können Sie ein Bild auf ein Listenelement zu befestigen. So erstellen Sie benutzerdefinierte Kugeln:

  1. Beginnen Sie mit einem benutzerdefinierten Bild.

    Kugel-Bilder sollte klein sein, so dass man wenig etwas machen müssen können. Das Bild wird auf eine geeignete Breite zugeschnitten werden, aber es wird die ganze Höhe des Originalbildes, so dass es kleiner zu machen.

  2. Präzisiere das list-style-image mit einem url Attribut.

    Sie können das Bild als die eingestellte list-style-image, und alle Kugeln werden mit diesem Bild ersetzt werden.

  3. Testen Sie die Liste in Ihrem Browser.

    Seien Sie sicher, dass alles richtig funktioniert. Überprüfen Sie, ob der Browser das Bild nicht finden, dass die Größe richtig ist, und dass alles sieht aus wie Sie es erwarten.

Wenn Sie wollen, um ein Bild nicht verwenden, hat CSS eine Reihe anderer Arten, die Sie auf Ihre Listenelemente anwenden können. Verwenden Sie die list-style-type Regel Ihre Liste eine von vielen Arten zu setzen. Schauen Sie sich offiziellen CSS-Dokumentation für eine vollständige Liste, aber die am häufigsten verwendeten Stiltypen sind Scheibe, Kreis, Platz, dezimal, Ober-roman, Unter-roman, Ober-latin, und Unter-latin.

Beachten Sie, dass Sie einen numerischen Styling ein Listenelement in einer geordneten oder ungeordneten Liste anwenden können, so dass die Unterscheidung zwischen diesen Listentypen ist weniger wichtig als früher zu sein.

Menü