列表项标记符号的设置

在常见的新闻列表中，标题前都会有一个小图标，这个图标可能是实心圆，也可能是空心圆，或者是小方块。很显然的，对于列表项前的这些标记符号，在CSS中都可以通过list-style-type属性来设置它们的表现形式。

可是很多时候由于字体或是字体大小的原因，列表项前通过list-style-type来设置的标记符号会显得过大或是其它原因而不能达到要求，这个时候就需要另外的解决方法。

当需要在新闻列表项前标记出自定义的图案时，可以采用list-style-image来设置。于是可以尝试使用这个方法来处理list-style-type无法解决的图案大小问题，可是由于受行高等因素的影响，有时图标并不能出现在预先设定好的位置上，可能是偏上或者是偏下，于是又需要另外一种解决方法。

之前有介绍过CSS背景图像，在CSS中可以任意的设置背景图像的铺排、定位、滚动等，由此就引出了列表项前标记符号的另一种设置方法——通过背景图像设置。

通过背景图像设置，可以很容易的就达到所需要的效果：

ul li {list-style:none; background:url(images/liImg.gif) no-repeat 0 50%; padding-left:10px;}

首先设置list-style为none，清除掉li元素自带的属性值，然后设置li的背景图像，设置背景图像的铺排方式为不平铺，然后通过数值去控制背景图像出现的位置（前一个数值表示横坐标的位置，后一个表示纵坐标的位置），最后再设置li元素的左边内边距，以保证背景图不会被内容覆盖到。

自定义的列表项标记符号就设置好了，不用担心字体或是行高等其他因素的影响了。