作为列表项标记的图像

vicky.yu

要指定列表项标记的图像，使用列表样式图像属性：

实例
ul
{
list-style-image: url('sqpurple.gif');
}

尝试一下 »
上面的例子在各大主流浏览器中的显示有所差异，IE 和 Opera 显示图像标记比火狐（ Firefox ），Chrome 和 Safari 更高一点点。


提示：
利用 list-style-position 可以确定标志出现在列表项内容之外还是内容内部。
如果你想在所有的浏览器放置同样的形象标志，就应使用浏览器兼容性解决方案，方法如下。
浏览器兼容性解决方案
同样在所有的浏览器，下面的例子会显示的图像标记：

实例
ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}
ul li {
  background-image: url(sqpurple.gif);
  background-repeat: no-repeat;
  background-position: 0px 5px;
  padding-left: 14px;
}

尝试一下 »
例子解释：

ul :
设置列表样式类型为没有列表项标记
设置填充和边距 0px（浏览器兼容性）
ul 中所有 li :
设置图像的 URL ，并设置它只显示一次（无重复）
您需要的定位图像位置（左 0px 和上下 5px ）
用 padding-left 属性把文本置于列表中