无序列表有序列表定义列表

最新推荐文章于 2023-05-18 18:41:03 发布

你好牛蛙

最新推荐文章于 2023-05-18 18:41:03 发布

阅读量1.3k

点赞数 2

分类专栏： html+css笔记文章标签： css 列表 html

本文链接：https://blog.csdn.net/qq_45821251/article/details/108809621

版权

html+css笔记专栏收录该内容

33 篇文章 2 订阅

订阅专栏

无序列表

ul标签用来创建一个无序列表

<ul></ul>

li标签用于向无序列表里面添加内容

<ul>
		<li>李老</li>
		<li>李王</li>
		<li>李刘</li>
		<li>李哥</li>
</ul>

在这里插入图片描述

type用于改变li打印的内容前面的符号样式

<ul type="circle">
			<li>李老</li>
			<li>李王</li>
			<li>李刘</li>
			<li>李哥</li>
		</ul>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul type="circle">
			<li>李老</li>
			<li>李王</li>
			<li>李刘</li>
			<li>李哥</li>
		</ul>
		<!--
        	ul标签创建一个ul列表 里面包含li标签 li标签用于向无序列表里面添加内容
        	可以在ul标签里面通过type=""来修改无序列表表内容前面符号的样式
        	某些浏览器不太兼容type设置的样式
        -->
	</body>
</html>

设置无项目符号的无序列表
因某些浏览器和其他浏览器对无序列表前面的项目符号显示的样式不同
所以我们可以设置不要项目符号或者直接在ul标签里面用内联样式 style="list-style: none"
如果需要设置项目符号,则可以采用为li设置背景图片的方式设置
在这里插入图片描述

有序列表

用ol替代无序列表中的ul就可创建一个有序列表
何为有序列表：
即，每一项有标号，各项互相之间有一定顺序叫有序列表
在这里插入图片描述
当然，我们也可以用type设置序号样式，type默认是"1"即阿拉伯数字序号
“a” "A"分别表示小写和大写的英文字母序号，即ABCDE…或abcde…
“i” "I"分别表示小写和大写的罗马数字序号，即

定义列表
用来对某个东西进行定义。它有两个标签，dt和dd，dt用来表示被说明的对象，dd表示，对象的定义。
在这里插入图片描述