列表

列表

无序列表：

使用ul元素定义，列表里的每一项使用li元素包裹

<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<ul>
		<li>haha</li>
		<li>xixi</li>
		<li>lala</li>
	</ul>
</body>
</html>

有序列表：

使用ol元素定义，每一项使用li元素包裹

ol元素有好几个属性可以控制列表序号的类型和顺序

<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<ol type="i" reversed="reversed">
		<li>我是第一个</li>
		<li>我是第二个</li>
		<li>我是第三个</li>
	</ol>
</body>
</html>

两个常用的css属性：

  1. list-style-type

设置列表的标志和序号类型

<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8">
	<style>
		ul.a {
			list-style-type: square;
			list-style-type: hiragana;<!--标志为实心方块，序号为日本平假名字符-->
		}
		ul.b {
			list-style-type: disc;<!--实心圈-->
		}
		ul.c {
			list-style-type: circle;<!--空心圈-->
		}
		ul.d {
			list-style-type: none;<!--无标志-->
		}
	</style>
</head>
<body>
	<ul class="a">
		<li>关刀</li>
		<li>双巨</li>
		<li>大剑</li>
	</ul>
	<ul class="b">
		<li>关刀</li>
		<li>双巨</li>
		<li>大剑</li>
	</ul>
	<ul class="c">
		<li>关刀</li>
		<li>双巨</li>
		<li>大剑</li>
	</ul>
	<ul class="d">
		<li>关刀</li>
		<li>双巨</li>
		<li>大剑</li>
	</ul>
</body>
</html>
  1. list-style-image

使列表的序号变成指定的图片

<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8">
	<style>
		ul {
			list-style-image: url("img/a.png");
		}
	</style>
</head>
<body>
	<ul>
		<li>关刀</li>
		<li>双巨</li>
		<li>大剑</li>
	</ul>
</body>
</html>

列表嵌套：

html5的列表是支持嵌套的

<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<ol>
		<li>大剑类
			<ul>
				<li>黑骑士剑</li>
				<li>大剑</li>
			</ul>
		</li>
		<li>特大剑类
			<ul>
				<li>黑骑士大剑</li>
			</ul>
		</li>
		<li>直剑类</li>
	</ol>
</body>
</html>

定义列表:

使用dl元素来实现，该元素定义了一个包括术语、定义、以及描述的列表，需要dt和dd元素配合实现，其中dt元素用于定义列表中项目部分的内容，dd元素用于定义描述部分的内容。

<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<dl>
		<dt>建山床</dt>
		<dd>是个狼人</dd>
	</dl>
	<dl>
		<dt>www.baidu.com</dt>
		<dt>www.bilibili.com</dt>
		<dd>神奇的网站</dd>
		<dt>whoami</dt>
		<dd>baidudu</dd>
	</dl>
</body>
</html>
posted @ 2021-01-28 09:52  ice--cream  阅读(70)  评论(0)    收藏  举报