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

Post a reply

Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

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

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

by bankjittapol » 27/11/2019 6:34 pm

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

Top