Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

การใช้รูปภาพเป็นรายการเครื่องหมายใน CSS


หากต้องการใช้รูปภาพเป็นเครื่องหมายรายการ ให้ใช้คุณสมบัติ list-style-image ใน CSS

ตัวอย่าง

เรามาดูตัวอย่างการใช้ภาพเป็น List Markers -

<!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>

ผลลัพธ์

การใช้รูปภาพเป็นรายการเครื่องหมายใน CSS