Group Blog
 
<<
มิถุนายน 2548
 
 1234
567891011
12131415161718
19202122232425
2627282930 
 
3 มิถุนายน 2548
 
All Blogs
 
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 ซึ่ง ผมยังอ่านไปไม่ถึงเหมือนกัน เพราะฉะนั้น คงจะต้องรอไปอีกหน่อยนะครับ เอิ๊กส์




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






      [สมุดเยี่ยม]





      Create Date : 03 มิถุนายน 2548
      Last Update : 2 ธันวาคม 2549 23:13:21 น. 4 comments
      Counter : 871 Pageviews.
      Share

 
เข้ามาเก็บ เข้ามาเกี่ยว เข้ามาเคี้ยวหญ้า เอ๊ย ตกลงเป็นชาวนาหรือเป็นฟายล่ะเนี่ย หนูมาหยาฯ



ขอบคุณสำหรับความรู้ค่ะพี่

หนูเก่ง หนูสวย หนูฉลาด หนูต้องทำเองได้สักวัน อิอิ

ยังคงชมตัวเองไปเรื่อยๆ



โดย: มรกตนาคสวาท วันที่: 3 มิถุนายน 2548 เวลา:12:34:45 น.  

 
ป้ามดละทึ่งจัง ทีคุณเขียนคำสั่งได้โดยไม่แสดงผล สอนป้ามดมั่งได้ไหมคะ


โดย: ป้ามด วันที่: 12 มิถุนายน 2548 เวลา:14:02:20 น.  

 
ป้ามดมารอคำตอบค่ะ


โดย: ป้ามด วันที่: 22 มิถุนายน 2548 เวลา:9:36:03 น.  

 
ดีๆ อีกแย้ววว


โดย: เกดจัง วันที่: 15 มกราคม 2549 เวลา:15:54:55 น.  

ชื่อ : * blog นี้ comment ได้เฉพาะสมาชิก
Comment :
  *ส่วน comment ไม่สามารถใช้ javascript และ style sheet
 

dont wanna no
Location :


[ดู Profile ทั้งหมด]

ฝากข้อความหลังไมค์
Rss Feed

ผู้ติดตามบล็อก : 2 คน [?]

Friends' blogs
[Add dont wanna no's blog to your web]
Links
 

 Pantip.com | PantipMarket.com | Pantown.com | © 2004 BlogGang.com allrights reserved.