โค๊ดซ้ำแบบนี้จะเขียนเป็น css ได้อย่างไรครับ

[Fallen]

โค๊ดซ้ำแบบนี้จะเขียนเป็น css ได้อย่างไรครับ

โค้ด เลือก ขยาย

<div class="pricepccontent">
<ul>
<li style="border-bottom:1px #666666 dotted; float:none;"><img src="/wp-content/themes/Eenter/images/icon_01.jpg"> <a href="http://www.facebook.com/">เฟสบุ๊ค</a></li>
<li style="border-bottom:1px #666666 dotted; float:none;"><img src="/wp-content/themes/Eenter/images/icon_01.jpg"> <a href="http://www.google.com/">Google</a></li>
<li style="border-bottom:1px #666666 dotted; float:none;"><img src="/wp-content/themes/Eenter/images/icon_01.jpg"> <a href="http://www.yahoo.com/">ยาฮู</a></li>
</ul>
</div>

[ปลวกจุติ]

กำหนดเป็น class ไว้ครับ

style sheet

โค้ด เลือก ขยาย


.test{
border-bottom:1px #666666 dotted;
float:none;

}


โค้ด เลือก ขยาย



<ul>
<li class="test"><img src="/wp-content/themes/Eenter/images/icon_01.jpg"> <a href="http://www.facebook.com/">เฟสบุ๊ค</a></li>
<li class="test"><img src="/wp-content/themes/Eenter/images/icon_01.jpg"> <a href="http://www.google.com/">Google</a></li>
<li class="test"><img src="/wp-content/themes/Eenter/images/icon_01.jpg"> <a href="http://www.yahoo.com/">ยาฮู</a></li>
</ul>


[esanza.com]

กำหนดเป็น class ไว้ครับ

style sheet

โค้ด เลือก ขยาย


.test{
border-bottom:1px #666666 dotted;
float:none;

}


ตามนี้เลยครับ 

โค้ด เลือก ขยาย



<ul>
<li class="test"><img src="/wp-content/themes/Eenter/images/icon_01.jpg"> <a href="http://www.facebook.com/">เฟสบุ๊ค</a></li>
<li class="test"><img src="/wp-content/themes/Eenter/images/icon_01.jpg"> <a href="http://www.google.com/">Google</a></li>
<li class="test"><img src="/wp-content/themes/Eenter/images/icon_01.jpg"> <a href="http://www.yahoo.com/">ยาฮู</a></li>
</ul>


[ttong]

หากมีคลาสอยู่แล้ว อาจใช้วิธีนี้ครับ

โค้ด (css) เลือก ขยาย


.pricepccontent ul li{
border-bottom:1px #666666 dotted;
float:none;
}


โค้ด (html) เลือก ขยาย


<div class="pricepccontent">
<ul>
<li><img src="/wp-content/themes/Eenter/images/icon_01.jpg"> <a href="http://www.facebook.com/">เฟสบุ๊ค</a></li>
<li><img src="/wp-content/themes/Eenter/images/icon_01.jpg"> <a href="http://www.google.com/">Google</a></li>
<li><img src="/wp-content/themes/Eenter/images/icon_01.jpg"> <a href="http://www.yahoo.com/">ยาฮู</a></li>
</ul>
</div>


[Fallen]

+1


<img src="/wp-content/themes/Eenter/images/icon_01.jpg">

รูปที่ซ้ำไม่มีวิธีไหนเหรอครับ มันเป็น icon ใส่หน้าหัวข้อนะครับ

[verysims]

+1


<img src="/wp-content/themes/Eenter/images/icon_01.jpg">

รูปที่ซ้ำไม่มีวิธีไหนเหรอครับ มันเป็น icon ใส่หน้าหัวข้อนะครับ

ใช้อันนี้ได้ครับ
ul
{
list-style-image:url('/wp-content/themes/Eenter/images/icon_01.jpg');
}

css code

โค้ด เลือก ขยาย

.pricepccontent ul li{
border-bottom:1px #666666 dotted;
float:none;
list-style-image:url('/wp-content/themes/Eenter/images/icon_01.jpg');
}

html code

โค้ด เลือก ขยาย


<div class="pricepccontent">
<ul>
<li> <a href="http://www.facebook.com/">เฟสบุ๊ค</a></li>
<li> <a href="http://www.google.com/">Google</a></li>
<li> <a href="http://www.yahoo.com/">ยาฮู</a></li>
</ul>
</div>

[Fallen]

+1

ได้เเล้วครับ

[Optimus]

+1


<img src="/wp-content/themes/Eenter/images/icon_01.jpg">

รูปที่ซ้ำไม่มีวิธีไหนเหรอครับ มันเป็น icon ใส่หน้าหัวข้อนะครับ

ใช้อันนี้ได้ครับ
ul
{
list-style-image:url('/wp-content/themes/Eenter/images/icon_01.jpg');
}

css code

โค้ด เลือก ขยาย

.pricepccontent ul li{
border-bottom:1px #666666 dotted;
float:none;
list-style-image:url('/wp-content/themes/Eenter/images/icon_01.jpg');
}

html code

โค้ด เลือก ขยาย


<div class="pricepccontent">
<ul>
<li> <a href="http://www.facebook.com/">เฟสบุ๊ค</a></li>
<li> <a href="http://www.google.com/">Google</a></li>
<li> <a href="http://www.yahoo.com/">ยาฮู</a></li>
</ul>
</div>

ขอบคุณครับ

[romance69]

ขอบคุณครับ 

[iamfenr]

ซ้ำแบบนี้แนะนำให้เขียนเป็นคลาสเหมือนที่ท่านบนๆตอบนั่นแหละครับ ตรงจุดแล้ว