CSS——＞列表样式

最新推荐文章于 2023-01-21 12:32:52 发布

省级干饭王

最新推荐文章于 2023-01-21 12:32:52 发布

阅读量305

点赞数

分类专栏： JavaScript 笔记 css

本文链接：https://blog.csdn.net/qq_55016379/article/details/117624609

版权

笔记同时被 3 个专栏收录

94 篇文章 0 订阅

订阅专栏

JavaScript

8 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

列表样式

列表项符号：list-style-type

在html中，对于有序列表和无序列表都是使用type属性来定义的

定义列表项符号

语法结构

list-style-type:取值;

属性说明

list-style-type属性是针对ol或者ul元素的，而不是里元素。

有序列表元素

属性值	说明
decimal	阿拉伯数字:1、2、3…(默认值)
lower-roman	小写罗马数字：i、ii、iii…
upper-roman	大写罗马数字:I、II、…
lower-alpha	小写英文字母
upper-alpha	大写英文字母

无序列表

属性值	说明
disc	⚫️实心圆
circle	⚪️空心圆
square	◼️正方形

代码实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表</title>
		<style type="text/css">
			#ol1{list-style-type: decimal;}
			#ol2{list-style-type: lower-roman;}
			#ol3{list-style-type: upper-roman;}
			#ol4{list-style-type: lower-alpha;}
			#ol5{list-style-type: upper-alpha;}
			#ol6{list-style-type: none;}
			#ul1{list-style-type: disc;}
			#ul2{list-style-type: circle;}
			#ul3{list-style-type: square;}
			#ul4{list-style-type: none;}
		</style>
	</head>
	<body>
		<ol id="ol1">
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ol>
		<hr/>
		<ol id="ol2">
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ol>
		<hr/>
		<ol id="ol3">
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ol>
		<hr/>
		<ol id="ol4">
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ol>
		<hr/>
		<ol id="ol5">
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ol>
		<hr/>
		<ol id="ol6">
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ol>
		<hr/>
		<ul id="ul1">
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ul>
		<hr/>
		<ul id="ul2">
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ul>
		<hr/>
		<ul id="ul3">
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ul>
		<hr/>
		<ul id="ul4">
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ul>
		<hr/>
	</body>
</html>

去处列表项符号

在CSS中，我们也是使用list-style-type属性来去除有序列表和无序列表的列表符号的

语法结构

list-style-type:none;

列表图片

在CSS中，不仅仅可以使用默认的列表符号，还是可以使用自定义的列表符号

语法结构：

list-style-image:url(图片路径)

省级干饭王

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS——＞列表样式

列表样式列表项符号：list-style-type在html中，对于有序列表和无序列表都是使用type属性来定义的定义列表项符号语法结构list-style-type:取值;属性说明list-style-type属性是针对ol或者ul元素的，而不是里元素。有序列表元素属性值说明decimal阿拉伯数字:1、2、3…(默认值)lower-roman小写罗马数字：i、ii、iii…upper-roman大写罗马数字:I、II、…lower-alph
复制链接

扫一扫