li标签相信大家都不陌生，可li的样式，程序里给出的就那么几种，尤其是图形样式（圆圈、方块）很单调，而且颜色只能是黑色，所以为了页面色彩搭配和美观，li的图形样式往往都是自定义出来的。

那怎么做呢？其实思路很简单，就是利用图片替换掉原来的样式。

实现有两种办法（都是基于css样式），但是本人强烈推荐第二种！

第一种：利用list-style-image

li

{

    list-style-image: url( "../images/circle.png" );

}

但是利用这个会有兼容性问题，主要出现在IE6、7中。如果你又设置li的行间距（即line-height），会发现IE6中图片与文字水平不对齐【如下图】，而且line-height设置的数值越大，偏离就越大（这个问题无解，起码我研究了一下没弄出来，若有达人解决请赐教啊），当然如果不设置行间距就不会有这种问题了。

如图：

http://s5/middle/6045274649ecd2990b1c4&690

第二种：利用background-image

li

{

    list-style-type: none;

    list-style-image: none;

    background-image: url( "../images/circle.png" );

    background-repeat: no-repeat;

    background-position: left center;

    padding-left: 10px;

}

这个是所有浏览器全兼容的最佳办法。

如图：

http://s15/middle/6045274649ecd40ab425e&690