HTML初学者--列表的简单制作

最新推荐文章于 2025-03-22 22:53:29 发布

吹笛少年

最新推荐文章于 2025-03-22 22:53:29 发布

阅读量1.9k

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_43970038/article/details/107307116

版权

HTML初学者系列（二）

制作一个简单的列表

首先，列表分为有序列表与无序列表。有序列表始于<ol>标签，每个列表项始于<li>标签。有序列表，顾名思义，各项目间存在顺序关系，列表项使用数字来标记。下面是一个简单的示例。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>有序列表模板</title>
		<style type="text/css">
			div{
				background-color: aqua;
				margin: 0 auto;
				border:1px solid antiquewhite;
				width: 300px;
				height:200px;
			}
			h4{
				text-align: center;
			}
			ol{
				padding-left: 100px;;
			}
		</style>
	</head>
	<body>
		<div>
			<h4>体育项目</h4>
			<ol>
				<li>篮球</li>
				<li>足球</li>
				<li>排球</li>
				<li>乒乓球</li>
			</ol>
		</div>
	</body>
</html>

视觉效果如下图
在这里插入图片描述
其实，有时候，我们不想要序列从1开始排序，可以给 ol标签添加属性 start,这时可以定义序列起始。

有时，为了使列表美观，我们设计时可能不会用数字显示，开发者也给了我们更多的选择。可以用有大写字母A…Z，小写字母a…z，甚至是罗马数字。只要在<ol>
后添加type样式属性即可,如

<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

效果
在这里插入图片描述

无序列表也是一样的，只不过列表的起始标签改为了<ul>,每个列表项还是<li>标签。，同样简单的code表示出来。如下图所示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无序列表模板</title>
		<style type="text/css">
			div{
				background-color: aqua;
				margin: 0 auto;
				border:1px solid antiquewhite;
				width: 300px;
				height:200px;
			}
			h4{
				text-align: center;
				color: azure;
			}
			ul{
				padding-left: 100px;
			}
		</style>
	</head>
	<body>
		<div>
			<h4>热门漫威电影</h4>
			<hr>
			<ul>
				<li>神奇女侠</li>
				<li>复仇者联盟</li>
				<li>蜘蛛侠</li>	
				<li>黑豹</li>
			</ul>
		</div>
	</body>
</html>

效果图

在这里插入图片描述
无序列表也可以修改自己的样式
有list-style-type:disc圆点列表
list-style-typesquare正方形列表

<h4>正方形列表：</h4>
<ul style="list-style-type:square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

在这里插入图片描述