代码实例
<html>
<head>
<style type="text/css">
li {
background: mistyrose;
}
li#arrow {
list-style: square url("/template/pc/skin/img/hot_03.gif") outside;
}
li#arrow-inside {
list-style: url("/template/pc/skin/img/hot_03.gif") inside;
}
li#marker-inside {
list-style: square inside;
}
li#marker-image {
list-style: square url("/template/pc/skin/img/hot_03.gif");
}
li#arrow-only {
list-style: url("/template/pc/skin/img/hot_03.gif");
}
li#marker {
list-style: circle;
}
li#position {
list-style: inside;
}
</style>
</head>
<body>
<ul>
<li id="arrow">All three styles can be provided.</li>
<li id="arrow-inside">The image and the position.</li>
<li id="marker-inside">The marker and the position.</li>
<li id="marker-image">The marker and the image.</li>
<li id="arrow-only">Just the image.</li>
<li id="marker">Just the marker.</li>
<li id="position">Just the position.</li>
</ul>
</body>
</html> 尝试一下 »
点击“尝试一下”按钮查看在线实例
简写属性
list-style是设置所有列表特性的简写属性。
列表样式简写属性的格式如下：
list-style: <list-style-type> <list-style-position> <list-style-image>
<html>
<head>
<style type="text/css">
li {
background: mistyrose;
}
li#arrow {
list-style: square url("/template/pc/skin/img/hot_03.gif") outside;
}
li#arrow-inside {
list-style: url("/template/pc/skin/img/hot_03.gif") inside;
}
li#marker-inside {
list-style: square inside;
}
li#marker-image {
list-style: square url("/template/pc/skin/img/hot_03.gif");
}
li#arrow-only {
list-style: url("/template/pc/skin/img/hot_03.gif");
}
li#marker {
list-style: circle;
}
li#position {
list-style: inside;
}
</style>
</head>
<body>
<ul>
<li id="arrow">All three styles can be provided.</li>
<li id="arrow-inside">The image and the position.</li>
<li id="marker-inside">The marker and the position.</li>
<li id="marker-image">The marker and the image.</li>
<li id="arrow-only">Just the image.</li>
<li id="marker">Just the marker.</li>
<li id="position">Just the position.</li>
</ul>
</body>