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

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

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

User avatar
bankjittapol
PHP Super Member
PHP Super Member
Posts: 344
Joined: 21/10/2019 10:19 am

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

Post by bankjittapol »

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

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

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

Code: Select all

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

Code: Select all

.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');
}

Code: Select all

<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 427 times

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 3 guests