CSS新手入门笔记整理:CSS列表样式

列表项符号:list-style-type

在HTML中,对于有序列表和无序列表的列表项符号,都是使用type属性来定义的。

语法

复制代码
list-style-type:取值;

list-style-type属性是针对ol或者ul元素的,而不是li元素。

有序列表属性

|-------------|---------------------|
| 属性值 | 说明 |
| decimal | 阿拉伯数字:1、2、3···(默认值) |
| lower-roman | 小写罗马数字:i、ii、i··· |
| upper-roman | 大写罗马数字:、II、III··· |
| lower-alpha | 小写英文字母:a、b、c··· |
| upper-alpha | 大写英文字母:A、B、C··· |

无序列表属性

|---------|-----------|
| 属性值 | 说明 |
| disc | 实心圆⚫(默认值) |
| circle | 空心圆O |
| square | 正方形◼️ |


去除列表项符号

语法

复制代码
list-style-type:none;

由于列表项符号不太美观,因此在实际开发中,大多数情况下我们都需要使用"list-styletype:none;"将其去掉。


列表项图片:list-style-image

语法

复制代码
list-style-image:url(图片路径);

相关推荐
IT_陈寒12 小时前
React useEffect依赖数组把我坑惨了,这次搞明白了
前端·人工智能·后端
gcw102412 小时前
Cron专业工具:定时任务与开发办公的一站式在线工具箱
java·前端·数据库·工具·crontab·cron·spring cron
环境栈笔记12 小时前
AI 浏览器任务失败怎么排查:Context、Session、Page State 和 Task Log 检查清单
前端·人工智能·后端·自动化
阳光是sunny12 小时前
别再让 AI 瞎找代码了!CodeGraph 这工具能让它秒懂你的项目
前端·后端·ai编程
tuddy78946413 小时前
快速创建常见的数据模型、CRUD 接口、配置文件等重复性结构
前端
小流苏生13 小时前
这是一篇关于忘记的文章
前端·程序员·ai编程
2601_9637713713 小时前
Scaling Podcast RSS Feeds and Audio Streaming on WordPress Servers
前端·windows·php
名字还没想好☜15 小时前
Next.js App Router 数据获取:fetch 缓存、revalidate 与 dynamic 一次讲清
前端
成都渲染101云渲染666620 小时前
如何在3ds Max中实现更快、更高质量的渲染
前端·javascript·人工智能
闲猫1 天前
Spring AI 对接Deepseek ChatModel 聊天对话
java·前端·spring