作为列表项标记的图像
要指定列表项标记的图像,使用列表样式图像属性:实例
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 属性把文本置于列表中
页:
[1]