CSS: list-style ändert das Listenattribut, um den li-Tag-Stil zu steuern-CSS-Tutorial-php.cn

CSS: list-style ändert das Listenattribut, um den li-Tag-Stil zu steuern

黄舟

Freigeben： 2017-06-29 09:34:14

Original

2357 Leute haben es durchsucht

Das Attribut

list_style wird zum Ändern der Attribute der -Liste verwendet, list-style-type wird zum Festlegen des Listenelementtyps verwendet und list-style- position wird verwendet, um die Position dieses Listenelements festzulegen. list-style-image wird verwendet, um die Verwendung eines Bildes zum Ersetzen der Listenelementmarkierung festzulegen.

list_style-Attribut wird verwendet, um festzulegen Ändern Sie die Attribute der Liste

Das Format ist wie folgt:

list_style: Listenelementmarkierungstyp Listenelementmarkierungsposition Listenelementmarkierung

Sie können auch die Liste festlegen Elementmarkierung separat:

list-style-type wird verwendet, um den Listenelementtyp festzulegen:

Der Standardwert ist „Disc“, also ein ausgefüllter Kreis.

Gemeinsame Werte: keine

Kreis Hohlkreis

Quadrat Vollquadrat

Dezimalzahlen

Kleinlateinische Kleinbuchstaben lateinische Buchstaben a, b, c....

große lateinische Großbuchstaben A, B, C....

list-style-position wird verwendet, um die Position dieses Listenelements festzulegen:

Der Standardwert außerhalb bedeutet, dass außerhalb des li-Tags ein Rand hinzugefügt wird: 1px durchgehend rot; Sie können die Position der Markierung sehen.

innen bedeutet, dass sich die Markierung innerhalb des li-Tags befindet, was beim Hinzufügen eines Rahmens deutlich sichtbar ist.

list-style-image wird verwendet, um die Verwendung von Bildern zum Ersetzen von Listenelement-Tags festzulegen:

Standardwert: keiner

Optionaler Wert: URL, das Format ist URL ("URL-Adresse");

Beispiel:

Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<style type="text/css"> 
ul { 
border:1px solid red; 
} 
li{ 
border:1px solid red; 
list-style:disc outside url(news_list.gif); 
list-style-position:5px; 
} 
</style> 
</head> 
<ul> 
<li>你好</li> 
<li>我好</li> 
</ul> 
<body> 
</body> 
</html>

Nach dem Login kopieren

Gibt einen „list-style-type“ an "Attribut für den Fall, dass das Bild nicht verfügbar ist.

Das obige ist der detaillierte Inhalt vonCSS: list-style ändert das Listenattribut, um den li-Tag-Stil zu steuern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!