HTML5+CSS3

最新推荐文章于 2025-10-16 11:32:48 发布

原创最新推荐文章于 2025-10-16 11:32:48 发布 · 190 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #列表

本文介绍了HTML5中创建有序列表(ol)和无序列表(ul)的基本概念，并通过示例展示了列表的嵌套使用，包括不同类型的列表项(lis)和子级列表的创建。示例中以星巴克的饮品菜单为内容，演示了如何用HTML5和CSS3构建层次清晰的列表结构。

HTML5+css3

列表

（有序列表）

:ol是英文orderer list的缩写，翻译为中文是有序列表
（无序列表）
- ：ul是英文UNordered list的缩写，翻译为中文是无序列表
  ###下列表为列表嵌套代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>o1课堂实践</title>
	</head>
	<body>
		<h2>
			<font size="7">星巴克
		</h2>
		<ul>
			<li>咖啡
				<ol>
					<li type="circle">摩卡</li>
					<li type="circle">蓝山</li>
				</ol>
			</li>
			<li>茶
				<ol>
					<li type="circle">红茶</li>
					<li type="circle">绿茶</li>
				</ol>
				<ol>
					<ol>
						<li>龙井</li>
						<li>碧螺春</li>
					</ol>
				</ol>
			</li>
			<li>牛奶
			</li>
	</body>
</html>