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

相关推荐
指尖的记忆16 小时前
前端 Monorepo 实战指南:仓库多到切疯?
前端
csdn2015_16 小时前
java 把对象转化为json字符串
java·前端·json
shughui16 小时前
Fiddler(二):自动转发(AutoResponder)功能详解
前端·测试工具·fiddler
初见雨夜16 小时前
OpenAI 官方出手:把 Codex 接进 Claude Code
前端·openai·ai编程
前端付豪16 小时前
实现消息级操作栏
前端·人工智能·后端
GISer_Jing17 小时前
Claude Code的「渐进式披露」——让AI Agent从“信息过载”到“精准高效”
前端·人工智能·aigc
apcipot_rain17 小时前
HTML知识概述
前端·javascript·html
leiming617 小时前
巧用 FreeRTOS 任务通知作“邮箱”:NeoPixel 灯环控制实战
java·前端·算法
茶底世界之下17 小时前
Harbeth:高性能Metal图像处理库,让你的图片处理速度飞起来!
前端·github·swift
wangfpp17 小时前
Pretext 如何颠覆前端文本布局
前端