सीएसएस का उपयोग कर के बजाय छवियों गोलियों

Question

मैं बनाने के लिए गोलियों के बजाय तीन अलग-अलग छवियों का उपयोग करना चाहते हैं एक lisli> टी

उदाहरण:

<ul> 
    <li>The dog is big</li> 
    <li>The dog is small</li> 
    <li>The dog is medium sized</li> 
</ul> 

तो गोलियों के बजाय ऊपर वाक्यांशों में से प्रत्येक से पहले

वहाँ होगा प्रत्येक से पहले एक अलग छवि बनें।

Answer 1

सूची-शैली-छवि का उपयोग करें: url (imagename); पूरी तरह से छवियों के साथ गोलियों को प्रतिस्थापित करने के लिए। इस विधि का नकारात्मक पक्ष यह है कि प्रत्येक ब्राउज़र अलग-अलग छवियों को स्थान देता है। सूची बुलेट के लिए सीएसएस पृष्ठभूमि छवियों एक और संगत विधि है।

http://css.maxdesign.com.au/listamatic/vertical04.htm

Answer 2

से आप सूची-शैली-छवि संपत्ति का उपयोग कर सकते हैं।

ul.dogbig 
{ 
    list-style-image:url("/images/dogbig.gif"); 
} 

Answer 3

वहाँ सीएसएस के इस तरह के एक संपत्ति है, लेकिन मुझे लगता है कि यह है कि यह हर अलग <li> तत्व के लिए काम नहीं करता:

ul 
{ 
list-style-image:url("/images/blueball.gif"); 
list-style-type:square; 
} 

मुझे आशा है कि यह आप

Answer 4

Live Demo

में मदद मिलेगी

यह सीएसएस संपत्ति list-style-image का उपयोग करता है।

HTML:

<ul> 
    <li class="b1">The dog is big</li> 
    <li class="b2">The dog is small</li> 
    <li class="b3">The dog is medium sized</li> 
</ul> 

सीएसएस:

ul { 
    margin: 0 0 0 32px; 
    line-height: 1.5 
} 
.b1 { 
    list-style-image: url(http://upload.wikimedia.org/wikipedia/commons/1/19/Icons-mini-icon_attachment.gif); 
} 
.b2 { 
    list-style-image: url(http://upload.wikimedia.org/wikipedia/commons/6/61/Icons-mini-icon_security.gif); 
} 
.b3 { 
    list-style-image: url(http://upload.wikimedia.org/wikipedia/commons/a/ab/Icons-mini-icon_clock.gif); 
}