求解!html里的列表属性里的list-style-image 具体该怎么用啊?就是怎么用它把列表标记换成自己定义的图案

求解!html里的列表属性里的list-style-image 具体该怎么用啊?就是怎么用它把列表标记换成自己定义的图案,第1张

其实要实现你说的那个方法,正确用法并不是使用list-style-image来实现的,因为并不是所有浏览器都能很好的支持它,并且它的效果也没有那么好。

正确的方法是用背景图片来实现。

例如HTML结构如下 :

<ul>

<li>列表1</li>

<li>列表2</li>

</ul>

CSS大致如下:

ul , li{margin:0padding:0list-style:none}

li{padding-left:20px

background:url('你要使用的自定义图片') no-repeat 0 0

}

只要这样就可以了。

list-style:none <ul><li>设置列表标记默认会是实心圆点,设成none就是没有标记列表格式有好几种。list-style-type设置列表的格式为none也就是没有格式。 *** 作方法如下:

1、首先新建一个html文件,命名为test.html。

2、在test.html文件内,使用ul、li标签创建一个列表,分别为测试一,测试二,测试三。

3、在test.html文件内,给ul标签添加一个class属性,用于样式的设置。

4、在test.html文件内,编写<style type="text/css"></style>标签,页面的css样式将写在该标签内。

5、在css标签内,通过class来设置ul的样式,将list-style属性设置为none,便可以实现取消掉li前面的点。

6、最后在浏览器打开test.html文件,查看实现的效果。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6150612.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-16
下一篇 2023-03-16

发表评论

登录后才能评论

评论列表(0条)

保存