CSS การใช้รูปภาพแสดงที่ Tag List

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
bankjittapol
PHP Super Member
PHP Super Member
โพสต์: 344
ลงทะเบียนเมื่อ: 21/10/2019 10:19 am

CSS การใช้รูปภาพแสดงที่ Tag List

โพสต์ที่ยังไม่ได้อ่าน โดย bankjittapol »

CSS การใช้รูปภาพแสดงที่ List รายการ
CSS คือ คำสั่งที่ใช้ในการจัดรูปแบบการแสดงผลของ คำสั่ง html ซึ่งสามารถใช้ในการกำหนดขนาดของข้อความ สีของข้อความ ตำแหน่งของข้อความ สีของพื้นหลัง เป็นต้น ซึ่ง CSS จะประกอบด้วยคำสั่งต่างมากกมาย และบทความนี้ จะใช้คำสั่ง CSS ในการที่จะให้ รูปภาพแสดงใน Tag List ซึ่งเป็น html tag นั่นเอง

Tag List ซึ่งเป็น html tag ซึ่งใช้ในการจัดรูปแบบการแสดงผลแบบรายการ ซึ่งสามารถใช้คำสั่ง เพื่อให้แสดงตัวเลขลำดับรายการ หรือไม่ให้แสดงก็สามารถทำได้ ซึ่งการใช้ CSS ที่ใช้ในการนำรูปภาพมาแสดงที่ tag list ทำได้ ดังนี้

คำสั่งที่ใช้

โค้ด: เลือกทั้งหมด

 
  ul {
  list-style-image: url(' รูปภาพที่ใช้  ');
}
  
ตั่วอย่างการใช้งาน

โค้ด: เลือกทั้งหมด

.new-list ul {
  list-style-image: url('../icon/new.png');
}
.update-list ul {
  list-style-image: url('../icon/update.png');
}
.bug-list ul {
  list-style-image: url('../icon/bug.png');
}

โค้ด: เลือกทั้งหมด

<div class="changelog-content"><div class="new-list"><h4 class="changelog-type changelog-type-new">New</h4>
<ul>
<li>ข้อความบอกการเพิ่ม</li>
<li>ข้อความบอกการเพิ่ม</li>
</ul>
</div><div class="update-list"><h4 class="changelog-type changelog-type-update">Update</h4>
<ul>
<li>ข้อความบอกการอัพเดท</li>
<li>ข้อความบอกการอัพเดท</li>
</ul>
</div><div class="bug-list"><h4 class="changelog-type changelog-type-fix">Bug fix</h4>
<ul>
<li>ข้อความบอกการแก้ไข</li>
<li>ข้อความบอกการแก้ไข</li>
</ul>
</div></div>
จากตัวอย่างคือการ กำหนดให้แสดงรูปภาพตาม หมวดหมู่ของรายการนั้นๆ โดย หมวดหมู่รายการ new ก็จะแสดง รูปภาพ plus เป็นต้น

ผลลัพธ์ที่ได้
CSS Knowledge-1.png
CSS Knowledge-1.png (31.51 KiB) Viewed 1502 times
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 64