Heim > Artikel > Web-Frontend > CSS: Detaillierte Erläuterung des Unterschieds zwischen List-Style-Type und List-Style-Image

CSS: Detaillierte Erläuterung des Unterschieds zwischen List-Style-Type und List-Style-Image

黄舟Original: 2017-06-29 13:40:252683Durchsuche

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&#39;阿拉伯数字-----&#39;lower-roman&#39;小写罗马--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(&#39;/i/eg_arrow.gif&#39;)
}
</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.

Hinweis: Bitte geben Sie immer ein „list-style-type“-Attribut an, falls das Bild nicht verfügbar ist und dennoch als Liste mit der Markierung

angezeigt werden kann.

Dieses Attribut gibt ein Bild als Symbol für ein geordnetes oder ungeordnetes Listenelement an. Die Platzierung des Bildes relativ zum Inhalt des Listenelements wird normalerweise mithilfe der Eigenschaft list-style-position gesteuert.

Hinweis: Geben Sie immer ein „list-style-type“-Attribut an, falls das Bild nicht verfügbar ist.

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Warum schlägt der Listenstiltyp in CSS immer fehl?Nächster Artikel：Warum schlägt der Listenstiltyp in CSS immer fehl?

In Verbindung stehende Artikel

Mehr sehen