Để định dạng cả danh sách không có thứ tự và có thứ tự, hãy sử dụng các thuộc tính list-style-type, list-style-image và list-style-position.
Ví dụ
Hãy để chúng tôi xem một ví dụ trong đó chúng tôi đang định dạng danh sách không có thứ tự (ul) -
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: square;
}
</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> Đầu ra
Ví dụ
Bây giờ chúng ta hãy xem một ví dụ trong đó chúng ta đang định dạng danh sách có thứ tự (ol) -
<!DOCTYPE html>
<html>
<head>
<style>
ol {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<h2>Teams</h2>
<ol>
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ol>
</body>
</html> Đầu ra
Ví dụ
Hãy để chúng tôi xem một ví dụ khác, trong đó chúng tôi sẽ đặt một hình ảnh cho kiểu danh sách cho cả danh sách có thứ tự và không có thứ tự -
<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 {
list-style-image: url('https://www.tutorialspoint.com/images/Swift.png');
}
ol.demo2 {
list-style-image: url('https://www.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> Đầu ra
