資料結構
網路
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.tw/images/Swift.png');
}
ol.demo2 {
list-style-image: url('https://tutorialspoint.tw/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 次檢視
廣告