พื้นฐาน CSS

เปลี่ยนสัญลักษณ์หน้า list

บทความที่ผ่านๆมาเราได้ลองเขียน list <li> กับบ้างแล้ว ในบทความนี้จะแสดงสัญลักษณ์หน้า list แต่ละแบบให้ดูกัน

ในบทเรียน HTML จะมีเรื่องการเขียน list อยู่ซี่งเครื่องหมายที่อยู่หน้า list นั้นสามารถเปลี่ยนได้โดยใช้คำสั่ง CSS

1. เปลี่ยนสัญลักษณ์หน้า list แบบไม่มีการเรียงลำดับ
list แบบไม่มีลำดับ สัญลักษณ์จะเป็นรูปซึ่งสามารถเปลี่ยนเป็น วงกลมแบบทึบ วงกลมแบบโปร่ง ส่ีเหลี่ยม หรือไม่ต้องการให้แสดงก็ได้

คลิกเพื่อทดลองเขียนด้วยตัวเอง


2. เปลี่ยนสัญลักษณ์หน้า list แบบมีการเรียงลำดับ

ตัวอย่างเปลี่ยนสัญลักษณ์หน้า list แบบมีลำดับ

คลิกเพื่อทดลองเขียนด้วยตัวเอง



3. สัญลักษณ์ทั้งหมด
ในตัวอย่างแสดงสัญลักษณ์ของ list ทั้งหมด สัญลักษณ์ตั้งแต่ lower-greek จะแสดงในเฉพาะ firefox เท่านั้น ถ้าใช้ Internet Explorer จะเห็นเป็นวงกลมปรกติ

คลิกเพื่อทดลองเขียนด้วยตัวเอง



4. ใช้รูปภาพเป็นสัญลักษณ์
สามารถใช้รูปภาพเป็นสัญลักษณ์ของ list ได้ ดังตัวอย่างที่แสดง

คลิกเพื่อทดลองเขียนด้วยตัวเอง



5. กำหนดตำแหน่งให้กับสํญลักษณ์

ตัวอย่างเป็นการกำหนดตำแหน่งให้กับสัญลักษณ์ ซึ่งกำหนดได้ 2 ตำแหน่งคือ 1.inside , 2.outside

คลิกเพื่อทดลองเขียนด้วยตัวเอง



6. รวมคำสั่งที่ใช้กับ list
ตัวอย่างแสดงการรวมคำสั่งที่ใช้กับ list

คลิกเพื่อทดลองเขียนด้วยตัวเอง


เลื่อนขึ้นด้านบน