CSS zum Erstellen von auffälligen Listen
Listen sind ein großartiges Webdesign-Element, da sie dem Endbenutzer ein einfaches Lesen ermöglichen. Die meisten Benutzer möchten schnell Antworten und überfliegen zunächst nur eine Website, um festzustellen, ob sie ihre Frage beantwortet. Dies gilt insbesondere dann, wenn sie Ihre Website über eine Suchmaschine aufrufen.

Die Verwendung von Überschriften-Tags und -Listen ist eine großartige Möglichkeit, um den primären Inhalt Ihrer Website leicht zu sehen. Wenn sie der Meinung sind, dass die Listen und Unterüberschriften interessant sind, besteht eine größere Wahrscheinlichkeit, dass sie auf Ihrer Website verbleiben. Dies führt natürlich zu reduzierten "Absprungraten" und trägt dazu bei, die Glaubwürdigkeit und das Ranking Ihrer Website in den Engines zu verbessern. Alles, was die Lesbarkeit verbessert und das Überfliegen der Augen erleichtert, kommt immer einer Website zugute. Ein tolles Design berücksichtigt immer die Lesbarkeit.

CSS ist eine einfache und sehr effektive Möglichkeit, stilvolle Listen mit benutzerdefinierten Aufzählungszeichen (Markierungen) zu erstellen. Sie können verschiedene Formen oder einfache benutzerdefinierte Grafiken einfügen, die mit dem Logo, den Farben oder dem Thema Ihrer Website verknüpft sind. Auf einer Ghost-Tour-Website habe ich beispielsweise ein kleines Ghost-Symbol erstellt, das in der seitlichen Navigationsleiste und in ungeordneten Listenelementen auf der Hauptseite verwendet wurde. Es war einfach, aber sehr niedlich und in das Thema der Website eingebunden, wodurch diese Seitenelemente hervorstechen.

In anderen Fällen können Aufzählungszeichen von wichtigen Inhalten in einer Liste ablenken. In diesem Fall kann eine Listenstileigenschaft von "none" verwendet werden, um die automatisch generierten Markierungen zu entfernen.

Listenstil-Eigenschaften



Verwenden Sie die Eigenschaft list-style-type, um den Markertyp auszuwählen, der für jedes Listenelement angezeigt wird. Die verfügbaren Werte sind Disc, Circle, Square, Decimal, Lower-Roman, Upper-Roman, Lower-Greek, Lower-Latin, Upper-Latin, Lower-Alpha, Upper-Alpha und keine.

Verwenden Sie die Eigenschaft list-style-image wie folgt, um Ihr eigenes Bild als Markierung anzugeben:

ul {list-style-image: url (imagename.jpg);
Listenstil-Position: außerhalb;
}

Die URL ist relativ zum Stylesheet und sollte auf den Ordner verweisen, in dem sich Ihr Bild befindet. In diesem Fall befindet sich das Bild im selben Ordner wie die CSS- und HTML-Datei. Wenn Sie Ihre Bilder in einem separaten Ordner ablegen, fügen Sie Folgendes hinzu: url (images / imagename.jpg)

Markerpositionen



Sie können auch die Position der Markierungen anpassen. Im obigen Beispiel wird die Aufzählungszeichen-Eigenschaft außerhalb des Inhaltsbereichs angezeigt.
list-style-position: inside ermöglicht das Aufzählungszeichen im Inhaltsbereich, sodass es in den Listeninhalt läuft.

Kurzschrifttechnik



Eine weitere schnelle Möglichkeit, eine Liste mit CSS zu formatieren, ist die Kurzschrifttechnik. Bei dieser Methode werden alle Listeneigenschaften in einer einzigen Eigenschaft angegeben:

ul
{
Listenstil: Kreis-URL ("image.gif");
}

Bei der Kurzschriftmethode müssen alle Werte in der angegebenen Reihenfolge wie folgt angezeigt werden:

Listenstil-Typ
Listenstil-Position (innen, außen)
Listenstil-Bild

Es spielt keine Rolle, ob Sie einen Wert überspringen, solange die anderen in der richtigen Reihenfolge bleiben.

Benutzerdefinierte Listen sind sehr nützlich und mit CSS leicht zu erreichen. Einfache Details verwandeln durchschnittliche Websites in Websites mit der besten Leistung.


Video-Anleitungen: Easy #CSS #DropDown Menü 2.0 diesmal Responsive! [Tutorial] (March 2024).