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(图片路径);

相关推荐
夏天要喝冰可乐12 小时前
Codex 写 Three.js 大屏实录:800 行代码,和一条画反的弧线
前端·aigc
欣欣之王来了12 小时前
v-bind语法糖::属性名的简写方式
前端·学习·架构·项目·vue3教程
2601_9540056213 小时前
# ricon SVG 编辑器:工业图元的“军火工厂“
前端·物联网·数学建模·架构·编辑器·制造
codeniu13 小时前
一个人,5天,从想法到上线:我用 TRAE 跑通全链路开发的完整实录
前端
shaibdoio13 小时前
RPA自动化获客怎么落地?瞬维AI评论区工程实践
前端·自动化·rpa·长沙瞬维ai
计算机魔术师13 小时前
807亿亏配900%留存:ANT招股书把AI的拧巴摊在桌上了
前端
未来之窗软件服务13 小时前
web网络请求竞态问题与取消方案-东方仙盟
前端·状态模式·仙盟创梦ide·东方仙盟·网络取消
wshzd13 小时前
LLM之Agent(120)|DeepSeek-Harness(二十七)Workflow 引擎与 Ralph 循环
前端·数据库·人工智能
涛涛ing14 小时前
React Compiler 1.0 之后,状态管理库正在被重新定义
前端
乘风gg14 小时前
出事了,AI 提效后,老板让我裁员20%
前端·后端·ai编程