HTML自定义列表li的项目符号清除li默认样式

2025-05-12 15:29:31

1、首先我来介绍下如何清除li的默认样式：这个需要用到CSS的相关知识，用list-style:none;很容易完成这个工作。具体代码如下：<html> <head><title>列表控制</title></head> <body> <ul style="list-style:none;"> <li>语文</li> <li>数学</li> <li>英语</li> </ul> </body></html>我们可以看到现在这个无序列表前面没有了默认的项目符号。

4、进入页面，选择我下图中红圈圈中的那个图片，存储到本地和HTML在同一个文件夹下，并命名为”li.jpg“，准备工作做好了后我们就需要给我们的无序列表添加刚下载好的项目符号。

6、可以看到这样写还是有点问题，首先我们只是给第一个设置了项目符号，其他的没有，第二个项目符号重复了。我们可以给li设计css样式，使得所有的li拎枋辏话都用统一的项目符号，并且只是显示一个项目符号。<html> <head> <title>列表控制</title> <style> li { background-image:url(li.jpg); background-repeat:no-repeat; } </style> </head> <body> <ol style="list-style:none; " > <li>语文</li> <li>数学</li> <li>英语</li> </ol> </body></html>具体执行结果如下图所示。

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。