วิธีการการปิดเครื่องหมายหน้าข้อความ ของ <li>

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

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

User avatar
Ittichai_chupol
PHP VIP Members
PHP VIP Members
Posts: 3828
Joined: 19/09/2018 10:33 am

วิธีการการปิดเครื่องหมายหน้าข้อความ ของ <li>

Post by Ittichai_chupol » 17/12/2019 3:08 pm

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

โดยทัวไป ภาษาที่จะใช้แสดงผลให้ผู้ใช้งานได้เห็นทางหน้าจอนั้น ก็คือ HTML แต่ภาษาที่จะเข้ามาช่วยให้ html มีความหน้าเข้ามาใช้งานหรือมีความสวยงามนั้นก็คื css แต่ถ้าหากเป็นเว็บไซต์ที่จะต้องมีการเก็บข้อมูล แล้วนำข้อมูลเหล่านั้นมาใช้งาน ก็จะต้องมี PHP Python หรืออื่นๆ เข้ามาพัฒนา โดยทั้งนี้หากผู้ใช้งานต้องการที่ะสร้างเว็บไซต์ให้มีความสวยงามนั้น ก็จำป็นที่จะต้องใช้ css มาช่วยปรับความสวยงสใของหน้าเว็บไซต์ ซึงอาจจะต้องต้องทำงานโดยการอ้างอิง tag ของ html มาเป็นต้วกำนหนดจุดตำแหน่งที่ต้องการปรับแก้ไข ดังตัวอย่างจากนนี้คือการปรับแก้ไข โดยการปิด สัญลักษณ์ที่มักจะอยู่ด้านหน้าของประโยคที่อยู่ภายใต้ tag <li> โดยใช้ css

ก่อนการนำไปใช้งาน

-- จะเห็นว่า ที่ตำแหน่งของธงนั้นจะมีจุดดำๆ
-- โดย จุดดำๆ นี้เกิดมาจาก <li> ที่อยู่ภายใต้ คลาส lang-inline
-- โดยถ้าหากผู้พัฒนา กำหนด css ให้กับ tag <li> เลย ก็จะทำให้ <li> ทุกตำแหน่งได้รับผลไปด้วย ดังนั้นจะต้องมีการระบุตำแหน่งที่ชัดเจน
-- โดยการระบุตำแหน่งนั้นอาจจะคลาส หรือ ไอดี ก็ได้ โดยในที่นี้จะใช้ คลาส
-- โดยวิธีการเขียนโคดมีดังนี้
CSS Knowledge-1.png

หลักการการใช้งาน ผลลัพธ์ที่ได้
CSS Knowledge-2.png

บทความที่เกี่ยวข้อง

CSS คำสั่ง background การกำหนดรายละเอียดของพื้นหลัง
หน่วยของค่าที่ใช้ต่างๆ ใน CSS
การใช้ box-shadow เพื่อสร้างเงาให้ กรอบกล่องข้อความ
私を傷つけるすべてが終了します。

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 4 guests