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

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

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

第一种：利用list-style-image

li

{

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

}

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

不知道你有没有遇到过这种现象：页面布局好后，一放大或缩小，页面的布局就会变形？这也是我刚开始很困扰的地方。但经过我的思考与实战，最终解决了这个问题。

页面之所以会变形，我认为（仅代表自己所理解的）是由于页面放大缩小时，它的页面宽度变化并不是绝对随着比例准确无误的，它会有个计算误差的（比如四舍五入），比如我们缩小时，页面宽度设置的是1000px，而再缩小到80%时，它的页面宽度可能并不是800px，而是803px，这才导致了页面结构的变化。

今天我为大家总结出了解决该问题的有效方法：

1. 将整个页面放入一个div中，设置div的宽度为1000px，在将你原来的页面内容的宽度设为960px（数并不绝对，根据需要而定），在让你原来的页面设置margin-left:20px;（见下图）