Blog tips เก็บ ๆ เค้ามา #6 การสร้างรายชื่อไม่มีลำดับไหล่

---

lists แบบต่าง ๆ

คำสั่งที่ดูสับสนอีกคำสั่งนึงก็คือ lists ครับ ลองมาดูทีละหัวข้อนะครับ

---

LISTS

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

สำหรับ lists นั้น เราแบ่งเป็น 2 ชนิด ดังนี้ครับ

1. Unorder lists หรือ list ที่ไม่ต้องเรียงลำดับก่อนหลัง
2. Order lists หรือ list ที่มีการกำหนดเลขนำหน้าหัวข้อ

---

Unorder lists

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

... แทน Unorder List และ
• ข้อความ

แทนข้อความในแต่ละหัวข้อที่เราจะตั้ง
ตัวอย่าง : ความสัมพันธ์ระหว่างชายและหญิงมีหลายลักษณะคือ
• แฟน
• เพื่อน
• กิ๊ก
• ชู้
• อื่น ๆ

ผลที่ได้ : ความสัมพันธ์ระหว่างชายและหญิงมีหลายลักษณะคือ


พอได้ไหมครับ ตามปกติใน html รุ่นใหม่ ๆ จะไม่ใส่ ก็ได้ครับ เพราะมันง่ายและแสดงผลเหมือนกัน แต่ในกรณีที่จะเปลี่ยน format ไปเป็น XHML จะยุ่งยากมากขึ้นมาก และที่สำคัญ การใส่ก็สวยงามดีครับ อีกอย่าง เราก็ไม่ต้องพิมพ์ใหม่ทุกครั้ง ก็ ctrl+c เพื่อ copy และ ctrl+v มา paste ก็ได้ง่ายดีด้วยครับ เวลาแก้ก็จะเห็นได้ง่ายกว่า

หากว่าต้องการทำให้เป็น sublist ลงไปอีก ก็ทำได้โดยอย่าเพิ่งปิดด้วยคำสั่ง

แต่ใช้

เข้าไปอีกที
ตัวอย่าง : ความสัมพันธ์ระหว่างชายและหญิงมีหลายลักษณะคือ



• แฟน


• เพื่อน


• กิ๊ก


• ชู้


<---- สังเกตว่าไม่ได้ใส่ / หน้า ul ไม่ใช่ tagปิด

• ชู้ชั่วคราว>
• ชู้ระยะสั้น




• อื่น ๆ




• แควน


• แฟนเพื่อน





ผลที่ได้ :ความสัมพันธ์ระหว่างชายและหญิงมีหลายลักษณะคือ



ไม่ยากใช่ไหมครับ แต่สำหรับท่านที่อ่าน ๆ อาจจะตาลายได้ ระวังว่าถ้าเป็นปกติก็พิมพ์คนละบรรทัดได้ แต่ใน blog ของพันทิปมันขึ้นบรรทัดใหม่ไม่ได้ครับเพราะจะทำให้คำสั่งไม่ได้ผล หลังพิมพ์เสร็จต้องจัดให้เป็นบรรทัดเดียวกันก่อนนะครับ

สังเกตุมั้ยครับว่า bullet หรือสัญลักษณ์นำหน้านั้นหน้าตาเป็นอย่างไร เรากำหนดให้แสดงตามที่เราต้องการได้ด้วยนะครับ ด้วยการใส่สี โดยใส่ หน้าข้อความและ ท้ายข้อความครับ การเปลี่ยนขนาดตัวอักษรก็ใช้วิธีเดียวกัน ใช้คำว่า ไว้หน้าข้อความและ หลังข้อความ ถ้าต้องการเปลี่ยนทั้งคู่ ก็ใช้ นำหน้า และจบด้วย ตัวเดียวพอที่ท้ายข้อความครับ

สำหรับการเปลี่ยน bullet นั้น เรากำหนดได้ โดยใช้ type=square หรือ type=circle ในส่วนของ
ครับ

ตัวอย่าง : ความสัมพันธ์ระหว่างชายและหญิงมีหลายลักษณะคือ
• แฟน
• เพื่อน
• กิ๊ก
• ชู้
• อื่น ๆ

ผลที่ได้ : ความสัมพันธ์ระหว่างชายและหญิงมีหลายลักษณะคือ



ถ้าไม่ชอบลักษณะ bullet ก็อาจจะใส่ภาพไปแทนได้ครับ โดยใช้คำสั่งง่าย ๆ ครับ โดยในการนี้เราจะต้องอาศัยการใช้ style sheet ครับ แต่ว่า เพื่อเป็นการไม่เสียเวลาเรียน ก็ลองเอาคำสั่งไปใช้กันก่อนก็ได้ครับ



หลาย ๆ คนอาจจะเห็นว่า เอ๊ะ หน้าตาของคำสั่ง style นี้คุ้น ๆ ไม่ต้องแปลกใจครับ เพราะว่าผมเอามาจาก blogคุณรำเพย ครับ ถ้าต้องการตกแต่งวิธีลัดก็ไปแอบ copy ได้เลย และสำหรับที่หลาย ๆ คนเห็นว่า บาง blog ทำภาพที่อยู่หน้า list ได้แตกต่างกันนั้น ต้องอาศัยการเขียน CSS ซึ่ง ผมยังอ่านไปไม่ถึงเหมือนกัน เพราะฉะนั้น คงจะต้องรอไปอีกหน่อยนะครับ เอิ๊กส์



---




คงจะปวดหัวกันน่าดู พักสักครู่นะครับ ก่อนจะเริ่มเรียนบทต่อไป เรื่องของการใช้ ลิสต์ที่กำหนดลำดับ กันครับ








^{[สมุดเยี่ยม]}




---