Rumah >hujung hadapan web >tutorial css >CSS：list-style-type与list-style-image的区别详解
CSS：list-style-type与list-style-image的区别详解
- 黄舟asal
- 2017-06-29 13:40:252730semak imbas
CSS列表
在一个无序列表ff6d136ddc5fdfeffaf53ff6ee95f185中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。
在一一个序列表c34106e0b4e09414b63b2ea253ff83d6中，标志可能是字母、数字或另外某种计数体系中的一个符号。
list-style-type：列表4fd97094d69c25babf045a876b5ece2f样式属性
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">
<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>
<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>
运行效果：
这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位
置通常使用 list-style-position 属性控制。
注释：请始终规定一个 "list-style-type" 属性以防图像不可用时仍然可以显示为带
marker的列表。
这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用 list-style-position 属性控制。
注释：请始终规定一个 "list-style-type" 属性以防图像不可用。
在实际使用中，为了方便，可以将上述三个属性值合并成list-style，例如：
li {list-style : url(example.gif) square inside}list-style的值可以以任何的顺序列出，而且，只要写明一个值，其他值都会以默认值列出，list-style-type的默认值为“disc” list-style-position的默认值是“outside”
Atas ialah kandungan terperinci CSS：list-style-type与list-style-image的区别详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!