css样式中li变图片 |css firefox hack

<ul>
<li>首页</li>
<li>产品</li>
<li>解决方案</li>
<li>服务</li>
</ul>

大家想要将每个列表项变成一个小图标，首先需要准备好这些小图标：

.icon-home {
background-image: url('home.png');
}
.icon-product {
background-image: url('product.png');
}
.icon-solution {
background-image: url('solution.png');
}
.icon-service {
background-image: url('service.png');
}

然后在HTML中添加相应的类名：

<ul>
<li class="icon-home">首页</li>
<li class="icon-product">产品</li>
<li class="icon-solution">解决方案</li>
<li class="icon-service">服务</li>
</ul>

这样做之后，每个列表项都会变成对应的小图标，非常简单易用。