05. html列表

最新推荐文章于 2023-01-04 20:29:03 发布

lizhoutx1

最新推荐文章于 2023-01-04 20:29:03 发布

阅读量113

点赞数

本文链接：https://blog.csdn.net/weixin_43475526/article/details/83388449

版权

HTML基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

无序列表
无序列表通常用于开发导航栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>无序列表</title>
	<style type="text/css">
		li {
			float: left;
			margin-right: 20px;
			list-style: none;
		}
	</style>
</head>
<body>
	<ul>
		<li>标题1</li>
		<li>标题2</li>
		<li>标题3</li>
		<li>标题4</li>
		<li>标题5</li>
	</ul>

	<!-- 
		无序列表
			常用于 - 导航栏
	 -->
</body>
</html>

在这里插入图片描述

有序列表
有序列表通常用于开发排名列表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>有序列表</title>
</head>
<body>
	<!-- ol>li{我是第$个li}*5 -->
	<ol>
		<li>我是第1个li</li>
		<li>我是第2个li</li>
		<li>我是第3个li</li>
		<li>我是第4个li</li>
		<li>我是第5个li</li>
	</ol>

	<!-- 
		有序列表
			主要用于 - 图书等排序
	 -->
</body>
</html>

在这里插入图片描述
3. 自定义列表
自定义通常开发分类导航，例如，手机>iphone，三星，华为等

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自定义列表</title>
</head>
<body>
	<dl>
		<dt>一级标题</dt>
		<dd>二级标题</dd>
		<dd>二级标题</dd>
		<dd>二级标题</dd>
		<dd>二级标题</dd>
	</dl>

	<!-- 
		自定义列表
			主要详细菜单,城市菜单等
	 -->
</body>
</html>

在这里插入图片描述

lizhoutx1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
05. html列表

无序列表有序列表自定义列表无序列表无序列表通常用于开发导航栏&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;无序列表&lt;/title&gt; &lt;style type="tex
复制链接

扫一扫