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

相关推荐
hh随便起个名20 分钟前
useRef和useState对比
前端·javascript·react
Hello_Embed26 分钟前
LVGL 入门(十五):接口优化
前端·笔记·stm32·单片机·嵌入式
huabiangaozhi42 分钟前
spring-boot-starter和spring-boot-starter-web的关联
前端
umeelove351 小时前
Spring boot整合quartz方法
java·前端·spring boot
小码哥_常1 小时前
Android 开发探秘:View.post()为何能获取View宽高
前端
爱学习的程序媛1 小时前
【Web前端】WebAssembly详解
前端·web·wasm
不会写DN1 小时前
Js常用的字符串处理
开发语言·前端·javascript
晓13131 小时前
第三章 TypeScript 高级类型
前端·javascript·typescript
一勺菠萝丶1 小时前
芋道项目部署时,前端和门户网站如何通过 Nginx 转发后台接口,而不直接暴露后端地址
运维·前端·nginx
黑白两客1 小时前
Vue 缓存机制
前端·vue.js·缓存