CSS: Detaillierte Erläuterung des Unterschieds zwischen List-Style-Type und List-Style-Image-CSS-Tutorial-php.cn

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

黄舟

Freigeben： 2017-06-29 13:40:25

Original

2741 Leute haben es durchsucht

CSS-Liste

In einer ungeordneten Liste

In einer Sequenzliste

list-style-type: list >

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} /*小写字母排序*/

Nach dem Login kopieren

/*其他属性值：*/

Nach dem Login kopieren

/*‘disc’是实心圆------‘decimal&#39;阿拉伯数字-----&#39;lower-roman&#39;小写罗马--lower-latin小写拉丁----upper-latin大写拉丁*/
<pre name="code" class="html">

Nach dem Login kopieren

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

Nach dem Login kopieren

</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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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.

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.

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!