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.
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:
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.
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.
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.