CSS 列表

い风花の雪栎

于 2021-03-27 00:09:08 发布

阅读量1.3w

点赞数 1

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/XRTONY/article/details/115217928

版权

笔记专栏收录该内容

90 篇文章

订阅专栏

此示例展示了如何使用CSS设置无序列表（ul）和有序列表（ol）的样式。无序列表使用了圆圈（circle）和方框（square）样式，有序列表使用了大写罗马数字（upper-roman）和小写字母（lower-alpha）样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS 列表

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}
</style>
</head>
<body>

<h1>列表</h1>
<p>无序列表实例：</p>

<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>有序列表实例：</p>
<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

</body>
</html>