CSS สำหรับสร้างรายการที่สะดุดตา

• อาจ 8, 2024

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

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

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

ในบางครั้งกระสุนอาจเบี่ยงเบนความสนใจจากเนื้อหาสำคัญในรายการ ในกรณีนั้นคุณสมบัติของรายการแบบ "none" สามารถใช้เพื่อลบเครื่องหมายที่สร้างขึ้นโดยอัตโนมัติ

รายการคุณสมบัติของสไตล์

ใช้คุณสมบัติ list-style-type เพื่อเลือกประเภทของเครื่องหมายที่ปรากฏขึ้นกับแต่ละรายการ ค่าที่ใช้ได้คือดิสก์, วงกลม, สี่เหลี่ยม, ทศนิยม, โรมันต่ำ, โรมันบน, กรีกล่าง, ละตินล่าง, ละตินบน, ล่างแอลฟา, อัลฟ่าตอนบนและไม่มี

ในการระบุภาพของคุณเป็นเครื่องหมายให้ใช้คุณสมบัติ list-style-image ดังต่อไปนี้:

ul {list-style-image: url (imagename.jpg);
รายการสไตล์ตำแหน่ง: นอก;
}

URL นั้นสัมพันธ์กับสไตล์ชีทและควรชี้ไปที่โฟลเดอร์ที่มีภาพของคุณอยู่ ในกรณีนี้ภาพจะอยู่ในโฟลเดอร์เดียวกับไฟล์ css และ html หากคุณวางภาพของคุณในโฟลเดอร์แยกต่างหากคุณจะต้องรวม: url (images / imagename.jpg)

ตำแหน่งเครื่องหมาย

นอกจากนี้คุณยังสามารถปรับแต่งตำแหน่งเครื่องหมาย ในตัวอย่างข้างต้นคุณสมบัติภายนอกทำให้สัญลักษณ์แสดงหัวข้อปรากฏนอกพื้นที่เนื้อหา
list-style-position: inside ช่วยให้สัญลักษณ์แสดงหัวข้อย่อยภายในพื้นที่เนื้อหาเพื่อให้มันวิ่งเข้าไปในเนื้อหารายการ

เทคนิคชวเลข

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

ยู
{
รายการสไตล์: วงกลม url ("image.gif");
}

ในวิธีการจดชวเลขค่าทั้งหมดต้องปรากฏตามลำดับที่ระบุดังนี้:

รูปแบบรายการประเภท
list-style-position (ภายใน, ภายนอก)
รูปแบบรายการภาพ

ไม่สำคัญว่าคุณจะข้ามค่าไปตราบใดที่ค่าอื่น ๆ ยังคงอยู่ในลำดับที่ถูกต้อง

รายการที่กำหนดเองมีประโยชน์มากและ CSS ทำให้ง่ายต่อการบรรลุ รายละเอียดง่าย ๆ เปลี่ยนเว็บไซต์เฉลี่ยให้เป็นเว็บไซต์ที่มีประสิทธิภาพสูงสุด