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 小时前
从 Electron 到 Tauri 2:我用 3.5MB 做了个音乐播放器
前端·vue.js·typescript
aykon2 小时前
DataSource详解以及优势
前端
Mintopia2 小时前
戴了 30 天智能手环后,我才发现自己一直低估了“睡眠”
前端
leolee182 小时前
react redux 简单使用
前端·react.js·redux
仰望星空的小猴子2 小时前
常用的Hooks
前端
天才熊猫君2 小时前
Vue Fragment 锚点机制
前端
米丘2 小时前
Git 常用操作命令
前端
星_离2 小时前
SSE—实时信息推送
前端
wuhen_n2 小时前
响应式探秘:ref vs reactive,我该选谁?
前端·javascript·vue.js
wuhen_n2 小时前
setup 的艺术:如何组织我们的组合式函数?
前端·javascript·vue.js