在网页设计中,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
上一篇:如何在网页设计中定义列表样式
下一篇:在网页设计中定义列表横竖显示