html之列表ul、ol、自定义列表

最新推荐文章于 2025-07-04 16:33:03 发布

javaScripte+

最新推荐文章于 2025-07-04 16:33:03 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： html ul ol 列表

本文链接：https://blog.youkuaiyun.com/CHMTL5C/article/details/83787548

html 同时被 3 个专栏收录

7 篇文章

订阅专栏

1 篇文章

订阅专栏

1 篇文章

订阅专栏

本文介绍了HTML中的列表类型，包括无序列表<ul>、有序列表<ol>以及自定义列表，详细讲解了它们的使用方法，并提供了W3School的参考资料和CSS样式设置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

列表
列表分为无序列表和有序列表及自定义列表

无序列表—ul
在这里插入图片描述
来源：w3school
css样式设置ul列表样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul type="circle">
			<li>2ffffffffff</li>
			<li>2</li>
			<li>2</li>
		</ul>
	</body>
	<style type="text/css">
		ul{
			/* list-style: none; */	/* 去掉列表样式 */
			/* list-style:square ; *//* 设置列表样式 */
			/* list-style-image: url(img/favicon.ico); *//* 设置图片 */
			/* list-style-position: inside; *//* 设置位置 */
		}
	</style>
</html>

有序列表-----ol

截图来源：w3school
样式修改列表样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul type="circle">
			<li>2ffffffffff</li>
			<li>2</li>
			<li>2</li>
		</ul>
		<ol>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ol>
		
	</body>
	<style type="text/css">
		ul{
			/* list-style: none; */	/* 去掉列表样式 默认样式:点*/
			/* list-style:square ; *//* 设置列表样式 */
			
			list-style-type: square;
			/* list-style-image: url(img/favicon.ico); *//* 设置图片 */
			/* list-style-position: inside; *//* 设置位置 */
		}
		I
		/* decimal：数字。

		lower-roman：小写罗马数字。

		upper-roman：大写罗马数字。

		lower-alpha：小写英文字母。

		upper-alpha：大写英文字母。 */
		ol{
			/* list-style: none;	/* 去掉列表样式 默认样式:阿拉伯数字*/ */
			list-style:decimal ;
			list-style-position: inside; *//* 设置位置*/
		}
	</style>
</html>

自定义列表

<dl>
	<dt>类似于标题</dt>
	<dd>这是一个列表项</dd>
</dl>