数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究使用 CSS 设置列表样式
列表既可以是有序的，也可以是无序的。借助 CSS，可以设置列表项标记或标记的图像。此外，借助 CSS，还可以设置列表项标记的位置。
现在让我们看一些示例 −
list-style-type
list-style-type 用于设置列表项标记的类型。
示例
现在让我们看一个示例，其中我们将设置有序列表 (ol) 的格式 −
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<h2>Teams</h2>
<ul>
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
</body>
</html>输出
list-style-image
list-style-image 属性用于将图像设为列表项标记。
示例
现在让我们看一个示例 −
<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 {
list-style-image: url('https://tutorialspoint.com/images/Swift.png');
}
ol.demo2 {
list-style-image: url('https://tutorialspoint.com/images/Swift.png');
}
</style>
</head>
<body>
<h2>Teams</h2>
<ul class="demo1">
<li>India - Qualified for WordCup</li>
<li>Australia - Qualified for WordCup</li>
<li>England - Qualified for WordCup</li>
</ul>
<h2>Players</h2>
<ol class="demo2">
<li>Virat Kohli</li>
<li>David Warner</li>
<li>Steve Smith</li>
</ol>
</body>
</html>输出
list-style-position
list-style-position 属性用于设置列表项标记的位置。
示例
现在让我们看一个示例 −
<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 {
list-style-position: outside;
}
ul.demo2 {
list-style-position: inside;
}
</style>
</head>
<body>
<h1>Teams</h1>
<h2>ODI Teams</h2>
<ul class="demo1">
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
<h2>Test Teams</h2>
<ul class="demo2">
<ul>
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
</ul>
</body>
</html>输出
更新于:30-12-2019
156 次查看
广告