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 分钟前
TS常规面试题1
前端·javascript·面试
再学一点就睡22 分钟前
实用为王!前端日常工具清单(调试 / 开发 / 协作工具全梳理)
前端·资讯·如何当个好爸爸
Jadon_z1 小时前
vue2 项目中 npm run dev 运行98% after emitting CopyPlugin 卡死
前端·npm
一心赚狗粮的宇叔1 小时前
web全栈开发学习-01html基础
前端·javascript·学习·html·web
IT瘾君1 小时前
JavaWeb:前端工程化-ElementPlus
前端·elementui·node.js·vue
爱编程的鱼1 小时前
如何在 HTML 中添加按钮
前端·javascript·html
鱼与宇1 小时前
WebSphere(WAS)
前端·chrome
站在风口的猪11081 小时前
《前端面试题:前端布局全面解析(圣杯布局、双飞翼布局等)》
前端·css·html·css3·html5
IT瘾君1 小时前
JavaWeb:前后端分离开发-部门管理
开发语言·前端·javascript
mldong1 小时前
我的全栈工程师之路:全栈学习路线分享
前端·后端