在网页设计中，CSS使用list-style-image属性来定义项目的图片符号样式。
用法如下：
list-style-image : none | url ( url )
在网站建设时，其作用是给列表添加项目图片，其中url是图片的路径，可以是绝对路径，也可以是相对路径。
【示例】启动Dreamweaver，新建一个网页，保存为test.html，输入以下内容：
<h2>京郊采摘好去处</h2>
<ul>
<li>顺义大胡子采摘园</li>
<li>静逸清农业生态观光园</li>
<li>英龙果园</li>
<li>永新源生态农业有限公司</li>
<li>金海湖观光采摘园</li>
</ul>
在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，用来定义列表项目图片样式。
ul{ /*列表样式*/
color:#CC0000;
list-style-image:url(icon.jpg); /*项目符号图片*/}
以上代码中，定义了项目图片。
提示：在设计网页时，为了添加定制的列表符号，可以使用list-style(-?)image属性。但是，这种方法对符号图像的位置的控制能力不强。更常用的方法是关闭列表符号，并且将定制的符号作为背景添加在列表元素上。然后可以使用背景图像的定位属性精确地控制定制符号的对准方式。
IE和Opera使用左空白边控制列表的缩进，而Safari和Firefox选择使用左填充。因此，首先需要将列表的空白边（margin）和填充（padding）设置为零，从而去掉这个缩进。要去掉默认的符号，只需将列表样式类型设置为none。
ul {
margin:0;
padding:0;
list-style-type:none;}
添加定制的符号非常简单。在列表项左边添加填充，为符号留出所需的空间。然后将符号图像作为背景图像应用于列表项。如果列表项跨越多行，你可能希望将符号放在接近列表项顶部的位置。但是，如果知道列表项的内容不会跨越多行，那么可以将垂直位置设置为middle或50%，从而让符号垂直居中。
li{
background: url(icon.jpg) no-repeat 0 50%; padding-left:30px;}
当前文章标题：在网页设计中自定义项目符号
当前URL：http://www.lyjtt.cn/news/wzzz/3089.html
上一篇：如何在网页设计中定义列表样式
下一篇：在网页设计中定义列表横竖显示
