CSS：list-style-typeとlist-style-imageの違いの詳しい説明-CSSチュートリアル-php.cn

CSS：list-style-typeとlist-style-imageの違いの詳しい説明

黄舟

リリース： 2017-06-29 13:40:25

オリジナル

2688 人が閲覧しました

CSS リスト

順序なしリスト

シーケンスリスト

list-style-type: リスト <シーケンスのマーカー> スタイル属性

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

ログイン後にコピー

/*其他属性值：*/

ログイン後にコピー

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

ログイン後にコピー

list-style-image使用:

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

ログイン後にコピー

操作効果:

list-style-position

注: 画像が利用できない場合でも、

実際の使用では、便宜上、上記の 3 つの属性値をリスト形式に組み合わせることができます。例:

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

ログイン後にコピー

リスト形式の値は、任意の順序で、値を指定する限り、他の値はデフォルト値でリストされます。list-style-type のデフォルト値は「disc」、list-style-position のデフォルト値は「outside」です。「

」

以上がCSS：list-style-typeとlist-style-imageの違いの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。