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

相关推荐
掘金者阿豪2 分钟前
把业务数据变成共享仪表盘:Metabase可视化与远程访问实践
前端·后端
kyriewen23 分钟前
折腾了半年 AI 编程工作流,最后发现效率瓶颈是桌上那块屏幕
前端·javascript·ai编程
蜗牛前端1 小时前
codex 全流程开发上线的高颜值礼簿小程序
前端·微信小程序
大龄秃头程序员2 小时前
我在图文流 App 里落地双层缓存、弱网降级与 OOM 治理
前端
老王以为2 小时前
React Renderer 分离的多平台架构
前端·react native·react.js
hunterandroid2 小时前
Kotlin Coroutines 与 Flow:让异步任务更清晰
前端
Bigger2 小时前
从零搭建 AI 代码审查服务:一份前端也能看懂的 Python 学习笔记
前端·ci/cd·ai编程
lichenyang4532 小时前
JSAPI、NAPI、Biz、Imp:ASCF Demo 如何真正调用系统能力和 C++ 能力
前端
lichenyang4533 小时前
IPC、JSVM、UIThread、libuv:ASCF 架构图里最容易混的几个词
前端
用户059540174463 小时前
Redis记忆存储故障恢复测试踩坑实录:手动测试让我漏掉了2个一致性Bug
前端·css