ホームページ > 記事 > ウェブフロントエンド > CSS：list-style-typeとlist-style-imageの違いの詳しい説明
CSS：list-style-typeとlist-style-imageの違いの詳しい説明
- 黄舟オリジナル
- 2017-06-29 13:40:252612ブラウズ
CSS リスト
順序なしリストff6d136ddc5fdfeffaf53ff6ee95f185 では、リスト項目のマークは、各リスト項目の横に表示されるドットです。
シーケンス リストc34106e0b4e09414b63b2ea253ff83d6 では、記号は文字、数字、またはその他の数え方の記号である場合があります。
list-style-type: リスト 0f1842c849f08c6a78ac0849a3302be3 スタイル属性
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'阿拉伯数字-----'lower-roman'小写罗马--lower-latin小写拉丁----upper-latin大写拉丁*/ <pre name="code" class="html">rreerree
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
属性を使用して制御されます。 マーカーを使用してリストとして表示できる場合に備えて、常に「list-style-type」属性を指定してください。 この属性は、順序付きまたは順序なしリスト項目のシンボルとして画像を指定します。リスト項目のコンテンツに対する画像の配置は、通常、list-style-position プロパティを使用して制御されます。 注: 画像が利用できない場合に備えて、常に「list-style-type」属性を指定してください。実際の使用では、便宜上、上記の 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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。