資料結構
網路
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 次瀏覽
廣告