Heim >Web-Frontend >CSS-Tutorial >CSS: Detaillierte Erläuterung des Unterschieds zwischen List-Style-Type und List-Style-Image
CSS-Liste
In einer ungeordneten Listeff6d136ddc5fdfeffaf53ff6ee95f185 ist die Markierung des Listenelements ein Punkt, der neben jedem Listenelement erscheint.
In einer Sequenzlistec34106e0b4e09414b63b2ea253ff83d6 kann das Symbol ein Buchstabe, eine Zahl oder ein Symbol in einem anderen Zählsystem sein.
list-style-type: list 0a3fd0feb8bd8f4558e9a3800837c0ee >
list-style-image
ul.circle {list-style-type:circle} /*无序原点marker*/
ul.square {list-style-type:square} /*无序方点marker*/
ol.upper-roman {list-style-type:upper-roman} /*大写罗马排序*/
ol.lower-alpha {list-style-type:lower-alpha} /*小写字母排序*/Verwendung: /*其他属性值：*/
/*‘disc’是实心圆------‘decimal'阿拉伯数字-----'lower-roman'小写罗马--lower-latin小写拉丁----upper-latin大写拉丁*/ <pre name="code" class="html">
<style type="text/css">
ul.circle {list-style-type:<span style="background-color: rgb(255, 255, 102);">circle</span>}
ul.square {list-style-type:<span style="background-color: rgb(255, 255, 51);">square</span>}
ol.upper-roman {list-style-type:<span style="background-color: rgb(102, 255, 153);">upper-roman</span>}
ol.lower-alpha {list-style-type:<span style="background-color: rgb(102, 255, 153);">lower-alpha</span>}
</style>
</head>
<body>
<p>Type circle:</p>
<span style="background-color: rgb(255, 0, 0);"><ul class="circle"></span>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Type square:</p>
<span style="background-color: rgb(255, 0, 0);"><ul class="square"></span>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li></ul> <p>Type upper-roman:</p> <span style="background-color: rgb(255, 204, 204);"><ol class="upper-roman"></span> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <p>Type lower-alpha:</p> <span style="background-color: rgb(255, 204, 204);"><ol class="lower-alpha"></span> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol>Laufeffekt:
<html>
<head>
<style type="text/css">
ul
{
list-style-image: url('/i/eg_arrow.gif')
}
</style>
</head>
<body>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>
</html>
Dieses Attribut gibt ein Bild als Symbol für ein geordnetes oder ungeordnetes Listenelement an. Die
-Position des Bildes relativ zum Inhalt des Listenelements wird normalerweise über das Attribut list-style-position
gesteuert.
Im tatsächlichen Gebrauch können die oben genannten drei Attributwerte der Einfachheit halber im Listenstil kombiniert werden, zum Beispiel:
Werte im Listenstil können in beliebiger Reihenfolge aufgelistet werden. Solange ein Wert angegeben ist, werden andere Werte mit Standardwerten aufgelistet -type ist „disc“ list- Der Standardwert von style-position ist „outside“
Das obige ist der detaillierte Inhalt vonCSS: Detaillierte Erläuterung des Unterschieds zwischen List-Style-Type und List-Style-Image. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!