数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究在 CSS 中格式化无序和有序列表
可以使用包含列表样式类型、列表样式图像和列表样式位置的 CSS 属性来设置无序和有序列表的样式和位置。
语法
CSS 列表样式属性的语法如下 −
Selector {
list-style: /*value*/
}
使用上罗马标记设置有序列表样式
以下示例说明了 CSS 列表样式属性，并设置了有序列表的样式。我们为有序列表设置了上罗马值 −
list-style: upper-roman;
示例
我们来看一下示例 −
<!DOCTYPE html>
<html>
<head>
<style>
ol {
list-style: upper-roman;
line-height: 150%;
}
</style>
</head>
<body>
<h2>Top Programming Languages</h2>
<ol>
<li>Python</li>
<li>Java</li>
<li>C#</li>
</ol>
</body>
</html>
使用下罗马标记设置有序列表样式
以下示例说明了 CSS 列表样式属性，并设置了有序列表的样式。我们为有序列表设置了小罗马值 −
list-style: lower-roman;
示例
我们来看一下示例 −
<!DOCTYPE html>
<html>
<head>
<style>
ol {
list-style: lower-roman;
line-height: 150%;
}
</style>
</head>
<body>
<h2>Top Programming Languages</h2>
<ol>
<li>Python</li>
<li>Java</li>
<li>C#</li>
</ol>
</body>
</html>
在列表项目内设置无序列表样式
以下示例说明了 CSS 列表样式属性，并设置了无序列表的样式。我们为无序列表设置了圆圈，并将位置也设置为内部 −
list-style: circle inside;
示例
我们来看一下示例 −
<!DOCTYPE html>
<html>
<head>
<style>
ul > ul{
list-style: circle inside;
}
li:last-child {
list-style-type: square;
}
</style>
</head>
<body>
<h2>Programming Languages</h2>
<ul>
<li>C++ programming language created by Bjarne Stroustrup as an extension of the C programming language.</li>
<li>Java programming language developed by James Gosling.</li>
<ul>
<li>Core Java</li>
<li>Advanced Java</li>
</ul>
<li>Scala is a modern multi-paradigm programming language designed to express common programming patterns in a concise, elegant, and type-safe way.</li>
</ul>
</body>
</html>
在列表项目外设置无序列表样式
以下示例说明了 CSS 列表样式属性，并设置了无序列表的样式。我们为无序列表设置了正方形，并将位置也设置为外部 −
list-style: square outside ;
示例
我们来看一下示例 −
<!DOCTYPE html>
<html>
<head>
<style>
ul > ul{
list-style: square outside;
}
li:last-child {
list-style-type: square;
}
</style>
</head>
<body>
<h2>Programming Languages</h2>
<ul>
<li>C++ programming language created by Bjarne Stroustrup as an extension of the C programming language.</li>
<li>Java programming language developed by James Gosling.</li>
<ul>
<li>Core Java</li>
<li>Advanced Java</li>
</ul>
<li>Scala is a modern multi-paradigm programming language designed to express common programming patterns in a concise, elegant, and type-safe way.</li>
</ul>
</body>
</html>
更新于：02-Nov-2023
175 次浏览
广告