当前位置：首页 > 技术交流

网站建设用CSS重新定义项目符号

作者：潍坊设计　网址：http://www.536123.com/technology/css-li.htm

网站建设常使用项目符号<li>，最常用到的新闻列表、分类列表等多个项目的内容上。<li>可以分级，可以把内容的逻辑关系非常直观的表现出来。<li>有自己默认的项目符号，通常这些符号与网站设计风格大相径庭，影响网站美观，所以需要对<li>重新进行装饰。

我们以最常见的新闻列表为例来介绍一下如何用CSS重新定义项目符号。潍坊设计www.536123.com在网站建设时，经常用到的html格式为：

<ul>
<li><a href="新闻1" title="新闻1">新闻1</a></li>
<li><a href="新闻2" title="新闻2">新闻2</a></li>
<li><a href="新闻3" title="新闻3">新闻3</a></li>
</ul>

改变li的项目符号非常简单，首先需要设计一个符号，保存成图片，然后再CSS中把li的样式设置成图片就行了。CSS代码如下：

<style type="text/css">
li {
list-style-type: none;
list-style-image: url(www/images/li3.gif);
}
</style>

很多时候，<a>需要增加hover特效，例如当鼠标移动到连接上时，需要改变项目符号的颜色，这个时候就需要一定的技巧了。

标准CSS只有a支持hover，所以需要在a上做文章，把符号图片作为a的背景图片，在a:hover中把图片换成另外一种颜色的图片就行了。CSS代码如下：

<style type="text/css">
li {
list-style-type: none;
}
li a {
background-image: url(www/images/li1.gif);
background-repeat: no-repeat;
background-position: left center;
padding-left: 10px;
}
li a:hover {
background-image: url(www/images/li2.gif);
}
</style>

上面的案例只是原理性的介绍，实际应用中可以根据自己的需要灵活变通。