制作 web 页面列表

最新推荐文章于 2024-09-12 21:44:12 发布

菇毒

最新推荐文章于 2024-09-12 21:44:12 发布

阅读量2.4k

点赞数 1

分类专栏： web 前端学习文章标签： html html5

本文链接：https://blog.csdn.net/weixin_43960383/article/details/120408229

版权

web 前端学习专栏收录该内容

90 篇文章 4 订阅

订阅专栏

制作 web 页面列表

前言
1. 先定义好两个列表的属性
2. 无序列表（ul）
3. 有序列表（ol）
4. 自定义列表（dl）
完整代码如下所示
结束语

前言

想了解列表的属性可点击这里

1. 先定义好两个列表的属性

<style type="text/css">
			ul {
				/* 正方形 */
				/* list-style: square; */
				/* 数字 */
				list-style: decimal;
			}
			ol {
				/* 空心圆 */
				/* list-style: circle; */
				/* 小圆点 */
				list-style: disc;
			}
		</style>

2. 无序列表（ul）

<!-- 无序列表 （使用的频率高） -->
		<p>有序列表</p>
		<ul>
			<li>比熊</li>
			<li>柯基</li>
			<li>迷你雪纳瑞</li>
			<li>边牧</li>
			<li>哈士奇</li>
			<li>柴犬</li>
			<li>金毛</li>
			<li>阿拉斯加</li>
			<li>苏格兰牧羊犬</li>
		</ul>

效果如下所示：
2021-9-23

3. 有序列表（ol）

<p>有序列表</p>
		<!-- 有序列表 -->
		<ol>
			<li>苏格兰折耳猫</li>
			<li>英国短毛猫</li>
			<li>美国短毛猫</li>
			<li>波斯猫</li>
			<li>加菲猫</li>
			<li>斯芬克斯猫</li>
			<li>布偶猫</li>
			<li>暹(xian)罗猫</li>
			<li>狸花猫</li>
		</ol>

效果如下所示：
2021-9-23

4. 自定义列表（dl）

<p>自定义列表</p>
		<!-- 自定义列表 -->
		<dl>
			<!-- 项目 -->
			<dt>周杰伦</dt>
			<!-- 项目描述 -->
			<dd>东风破</dd>
			<dd>霍元甲</dd>
			<dd>七里香</dd>
			<dd>明明就</dd>
			<dt>林俊杰</dt>
			<dd>江南</dd>
			<dd>一千年以后</dd>
			<dd>醉赤壁</dd>
			<dd>交换余生</dd>
			<dt>邓紫棋</dt>
			<dd>画</dd>
			<dd>泡沫</dd>
			<dd>喜欢你</dd>
			<dd>光年之外</dd>
		</dl>

效果如下所示：
2021-9-23

完整代码如下所示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul {
				/*正方形*/
				/*list-style:sqware;*/
				/*数字*/
				list-style: decimal;
			}
			ol {
				/*空心圆*/
				/*list-style:circle;*/
				/*小圆点*/
				list-style: disc;
			}
		</style>
	</head>
	<body>
		<p>无序列表</p>
		<!-- 有序列表 （使用的频率高） -->
		<ul>
			<li>比熊</li>
			<li>柯基</li>
			<li>迷你雪纳瑞</li>
			<li>边牧</li>
			<li>哈士奇</li>
			<li>柴犬</li>
			<li>金毛</li>
			<li>阿拉斯加</li>
			<li>苏格兰牧羊犬</li>
		</ul>
		<p>有序列表</p>
		<!-- 有序列表 -->
		<ol>
			<li>苏格兰折耳猫</li>
			<li>英国短毛猫</li>
			<li>美国短毛猫</li>
			<li>波斯猫</li>
			<li>加菲猫</li>
			<li>斯芬克斯猫</li>
			<li>布偶猫</li>
			<li>暹(xian)罗猫</li>
			<li>狸花猫</li>
		</ol>
		<p>自定义列表</p>
		<!-- 自定义列表 -->
		<dl>
			<!-- 项目 -->
			<dt>周杰伦</dt>
			<!-- 项目描述 -->
			<dd>东风破</dd>
			<dd>霍元甲</dd>
			<dd>七里香</dd>
			<dd>明明就</dd>
			<dt>林俊杰</dt>
			<dd>江南</dd>
			<dd>一千年以后</dd>
			<dd>醉赤壁</dd>
			<dd>交换余生</dd>
			<dt>邓紫棋</dt>
			<dd>画</dd>
			<dd>泡沫</dd>
			<dd>喜欢你</dd>
			<dd>光年之外</dd>
		</dl>
	</body>
</html>