โค๊ดซ้ำแบบนี้จะเขียนเป็น 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>
อ้างถึงจาก: ปลวกจุติ ใน 12 มีนาคม 2014, 09:13:15
กำหนดเป็น class ไว้ครับ
style sheet
.test{
border-bottom:1px #666666 dotted;
float:none;
}
ตามนี้เลยครับ :wanwan016:
<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>
หากมีคลาสอยู่แล้ว อาจใช้วิธีนี้ครับ
.pricepccontent ul li{
border-bottom:1px #666666 dotted;
float:none;
}
<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>
+1 :wanwan017:
<img src="/wp-content/themes/Eenter/images/icon_01.jpg">
รูปที่ซ้ำไม่มีวิธีไหนเหรอครับ มันเป็น icon ใส่หน้าหัวข้อนะครับ
:wanwan011:
อ้างถึงจาก: Fallen ใน 12 มีนาคม 2014, 11:50:17
+1
:wanwan017:
<img src="/wp-content/themes/Eenter/images/icon_01.jpg">
รูปที่ซ้ำไม่มีวิธีไหนเหรอครับ มันเป็น icon ใส่หน้าหัวข้อนะครับ
:wanwan011:
ใช้อันนี้ได้ครับ
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>
+1
ได้เเล้วครับ
:wanwan019:
อ้างถึงจาก: verysims ใน 12 มีนาคม 2014, 12:02:50
อ้างถึงจาก: Fallen ใน 12 มีนาคม 2014, 11:50:17
+1
:wanwan017:
<img src="/wp-content/themes/Eenter/images/icon_01.jpg">
รูปที่ซ้ำไม่มีวิธีไหนเหรอครับ มันเป็น icon ใส่หน้าหัวข้อนะครับ
:wanwan011:
ใช้อันนี้ได้ครับ
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>
ขอบคุณครับ
ขอบคุณครับ :wanwan017:
ซ้ำแบบนี้แนะนำให้เขียนเป็นคลาสเหมือนที่ท่านบนๆตอบนั่นแหละครับ ตรงจุดแล้ว