โดยปกติแล้ว ใน HTML เมื่อเราใช้ ลิสต์ แบบไม่เรียงลำดับ <ul> ผลลัพธ์ที่แสดงออกมา จะมีวงกลมดำๆ อยู่ด้านหน้า

 

list-style

 

เราสามารถเปลี่ยนวงกลมดำๆ เป็นภาพได้ด้วย css ดูโค้ดนะครับ

 

 

1
2
3
4
5
6
7
8
9
10

<style type="text/css"> 
<!-- 
.list_style { list-style-image: url(images/house.png); } 
--> 
</style> 
 
<ul> 
    <li class="list_style">หัวข้อที่ 1</li>  
    <li class="list_style">หัวข้อที่ 2</li> 
</ul>

 

 

เราจะใช้ list-style-image:url(); เพื่อเปลี่ยนวงกลมดำๆ เป็นภาพที่ต้องการ  ภายในวงเล็บหลัง url ก็ระบุพาธของภาพนะครับ ดูจากตัวอย่าง  ต่อจากนี้ไปลิสต์ของคุณก็จะไม่น่าเบื่ออีกต่อไป

CSS image
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ