การใช้งานรายการ HTML ที่ยอดเยี่ยมในการออกแบบเว็บ
คุณสามารถค้นหารายการที่ออกแบบมาอย่างดีทั่วอินเทอร์เน็ต นักออกแบบใช้มันมานานหลายทศวรรษแล้ว ข้อมูลหน้าประสานงานและเค้าโครง, และในเว็บปัจจุบันคุณสามารถเห็นความคิดสร้างสรรค์ที่ยอดเยี่ยมในการออกแบบเว็บที่ใช้รายการ เหล่านี้รวมถึงเมนูการนำทางลิงก์โปรไฟล์คลังงาน / รายการตรวจสอบและการใช้งานอื่น ๆ อีกมากมาย!
ในโพสต์นี้ฉันจะแนะนำรายการ HTML ประเภทต่าง ๆ พร้อมด้วยเคล็ดลับในการออกแบบโดยเฉพาะอย่างยิ่งวิธีการ เพิ่มความโดดเด่นให้กับรายการของคุณ. นอกจากนี้ฉันจะนำคุณผ่านตัวอย่างของเว็บไซต์ที่มีการออกแบบรายการที่ยอดเยี่ยมและในที่สุดคุณจะได้รับรายชื่อเว็บไซต์ที่มีรายการ HTML ที่ออกแบบมาอย่างดี ไม่ต้องสงสัยอีกต่อไปเกี่ยวกับวิธีทำให้รายการดูธรรมดาของคุณดูไม่เหมือนใครและเริ่มใช้ประโยชน์สูงสุดจากรายการวันนี้!
องค์ประกอบรายชื่อ
นักออกแบบเว็บไซต์กระโดดจาก bandwagon หนึ่งไปยังอีกอย่างต่อเนื่องทำให้รูปแบบของเว็บไซต์เปลี่ยนไปตามกาลเวลา แต่รายการต่าง ๆ ได้รับการทดสอบตามกาลเวลาและอาจเป็นสิ่งที่ดีในอนาคตของ World Wide Web.
ก่อนที่จะตรวจสอบตัวอย่างฉันต้องการครอบคลุมบางจุดด้วยรายการ HTML มีรายการไม่กี่แบบที่คุณสามารถใช้ในงานออกแบบของคุณเอง นักออกแบบเว็บไซต์ส่วนใหญ่มุ่งเน้นไปที่ รายการที่ไม่ได้เรียงลำดับ ซึ่งเปิดด้วย
แท็ก แต่มีรูปแบบที่นิยมน้อยกว่าสองรูปแบบ: รายการสั่งซื้อ และ คำจำกัดความข้อมูล. ฉันได้เข้าไปดูรายละเอียดเพิ่มเติมด้านล่าง.
รายการที่ไม่เรียงลำดับ ()
อาจเป็นหนึ่งในองค์ประกอบที่ใช้มากที่สุดในมาตรฐาน HTML4 / HTML5 รายการที่ไม่เรียงลำดับจะส่งข้อมูลออกในลักษณะเดียวกับรายการที่สั่งอย่างไรก็ตามคุณ จะไม่เห็นเครื่องหมายตัวเลขที่ด้านข้าง. แต่ละรายการจะได้รับ วงกลมขนาดเล็กหรือแผ่นดิสก์ และแตกออกเป็นบรรทัดใหม่ ไอคอนนี้ ยังสามารถเปลี่ยนแปลงได้ด้วยคุณสมบัติ list-style-type พบใน CSS.
ด้านล่างเป็นตัวอย่างโค้ดของรายการที่ไม่ได้เรียงลำดับ:
- รายการ 1
- รายการ 2
- รายการ 3
รายการที่ไม่เรียงลำดับเป็นวิธีการรักษาที่สมบูรณ์แบบสำหรับการสร้าง ลิงค์การนำทาง. เนื่องจากคุณสามารถ ซ้อนรายการทั้งหมดไว้ในรายการใดก็ได้ มันคือ เรื่องง่าย ๆ ในการสร้างลิงค์ย่อยการนำทาง เช่นกัน หลังจากลบสไตล์รายการคุณจะถูกทิ้งให้อยู่กับองค์ประกอบของรายการที่ว่างเปล่า จากที่นี่คุณสามารถจัดสไตล์สมอลิงก์เพื่อให้ปรากฏเป็นองค์ประกอบบล็อกในหน้าของคุณดังนั้นการกรอกเมนูการออกแบบการนำทางและด้วยรหัส jQuery คุณสามารถใส่ส่วนหัวที่สวยงามสำหรับเว็บไซต์ของคุณ.
ส่วนใหญ่แล้วคุณจะพบรายการที่ไม่ได้เรียงลำดับอยู่ตรงกลางบทความบนเว็บหรือคำแนะนำในการติดตั้ง จะสังเกตได้ว่า Google และบอตค้นหาอื่น ๆ จะไม่ประมวลผลเนื้อหาของหน้าเว็บของคุณในลักษณะที่แตกต่างออกไป, ดังนั้นคุณ SEO ไม่ควรได้รับผลกระทบไม่ว่าคุณจะเลือกรายการประเภทใด.
รายการสั่งซื้อ ()
เมื่อคุณต้องการสั่งชุดข้อมูลเป็นไปได้ที่จะตั้งกรอบงานเค้าโครงของคุณเองตั้งแต่เริ่มต้น แต่ด้วยวิธีนี้คุณจะต้องเพิ่มหมายเลขที่เพิ่มขึ้นแต่ละชุดด้วยตนเองซึ่งอาจเป็นเรื่องที่น่าเบื่อ รายการสั่งซื้อที่ดีสำหรับ รักษางานที่มีหมายเลขในสาย ไม่มีสกรูใด ๆ ลำดับของรายการภายในของคุณ () จะกำหนดวิธีการนำเสนอข้อมูล.
ด้านล่างเป็นตัวอย่างรหัสของรายการที่สั่งซื้อ:
- รายการ 1
- รายการ 2
- รายการ 3
มันเป็นไปได้ที่จะ เปลี่ยนตัวนับจากหมายเลขปกติเป็นตัวเลือกอื่น ๆ จำนวนหนึ่ง. เหล่านี้ ได้แก่ ตัวอักษรตามตัวอักษร และ ตัวเลขโรมัน, เพื่อชื่อไม่กี่ นักออกแบบเว็บไซต์จะใช้รายการสั่งซื้อสำหรับรายการเฉพาะเนื้อหา. ข้อมูลสูตร, งานประจำวัน, รายการโปรด, หรือ ผู้ใช้ที่เข้าสู่ระบบสูงสุด / ล่าสุด เป็นเพียงตัวอย่างเล็ก ๆ น้อย ๆ บ่อยครั้งที่คุณจะเห็น ความคิดเห็นบล็อก สร้างขึ้นโดยใช้รายการสั่งซื้อเพื่อเก็บความคิดเห็นแต่ละรายการในลำดับหมายเลข.
รายการคำจำกัดความของข้อมูล ()
รายการคำนิยามจะไม่เห็นบ่อยนัก (ไม่เหมือนที่เคยเป็นที่นิยม) พวกเขาเคยเห็นกับนักออกแบบเว็บไซต์ที่สร้างรูปแบบที่ซับซ้อนของการเชื่อมโยงหรือเนื้อหากล่อง แท็กรายการข้อมูล (
) วันนี้ผู้เขียนโค้ดมักเข้าใจผิด ในรายการข้อมูลจำเพาะ HTML4.01 ถูกนำมาใช้เพื่อ จับคู่รายการกับคำอธิบาย. สิ่งเหล่านี้เรียกว่ารายการคำจำกัดความ.
ด้านล่างเป็นตัวอย่างรหัสของรายการคำจำกัดความข้อมูล:
- รายการ 1
- ลักษณะ
- รายการ 2
- ลักษณะ
- รายการ 3
- ลักษณะ
อย่างไรก็ตามด้วยรายการข้อมูลจำเพาะ HTML5 ใหม่ได้รับการถอดความ ไม่มีความแตกต่างกับไวยากรณ์ในวิธีที่คุณใช้องค์ประกอบอย่างไรก็ตามจุดประสงค์ของพวกเขาได้รับการปรับปรุงเป็น รายการคำอธิบายซึ่งประกอบด้วยหนึ่งหรือมากกว่าหนึ่งเงื่อนไขข้อมูล () ตามด้วยคำจำกัดความข้อมูลอย่างน้อยหนึ่งรายการ (
).
ตัวอย่างที่ชัดเจนจากบทความของ HTML5 Doctor คือ รายการที่จัดรูปแบบข้อมูลเมตา. ภายในหนึ่งเดียว ดล
รายการองค์ประกอบที่คุณต้องการ กำหนดคำ, เช่นชื่อของคุณแต่ละคนจะตามมาทีหลัง แท็กความหมายสามารถอธิบายข้อมูล เกี่ยวกับคุณอาจเป็นอายุอาชีพเมือง / เมืองปัจจุบัน ฯลฯ ในที่สุด ชุดข้อมูลใด ๆ ที่มีคู่คีย์ / ค่าเหมาะสมอย่างยิ่งในรายการคำอธิบาย. คุณสามารถใช้คำศัพท์มากกว่าหนึ่งคำในรายการ แต่ W3C ระบุว่า แต่ละคำควรไม่ซ้ำกัน ในรายการ.
ตอนนี้เราได้กำหนดรูปแบบรายการยอดนิยม 3 แบบมาดูตัวอย่างกัน! นักออกแบบเว็บไซต์มีความคิดสร้างสรรค์อย่างมากกับรายชื่อในช่วงไม่กี่ปีที่ผ่านมา ฉันทำรายการเว็บไซต์ที่ชื่นชอบ 7 รายการด้านล่างโดยเน้นเฉพาะการใช้งานรายการอย่างสร้างสรรค์.
การนำทางรายการที่ไม่เรียงลำดับง่าย ๆ
เมนูการนำทางนั้นง่ายกว่ามากในการสร้างด้วยเทคนิค CSS ที่ทันสมัย นี่คือเหตุผลว่าทำไมรายการที่ไม่มีการเรียงลำดับและแม้แต่รายการที่เรียงลำดับได้กลายเป็นตัวเลือกยอดนิยม หนึ่งในตัวอย่างที่ชื่นชอบเกี่ยวกับเรื่องนี้ปรากฏบนบล็อกสื่อโซเชียล Mashable.
คุณจะสังเกตเห็นลิงก์หลัก 2 ชุดที่ด้านบนของส่วนหัว โดยตรงไปที่ด้านบนของโลโก้ของพวกเขาเป็นรายการที่ไม่มีการเรียงลำดับขนาดเล็กที่มีลิงก์ชุมชนเช่นเรื่องเด่นหัวข้อยอดนิยมและผู้คน นักออกแบบได้สร้างรูปแบบโฉบโฉบเฉี่ยวซึ่งมีพื้นหลังที่เป็นของแข็งและโทนสี.
ด้านล่างนี้คุณจะเห็นลิงก์การนำทางย่อย เมนูการนำทางนี้นำไปสู่หมวดหมู่บล็อกเช่น Social Media หรือ Tech รายการที่ไม่เรียงลำดับทั้งสองรายการจะอยู่ภายใน HTML5 ธาตุ เพื่อให้ทุกอย่างสอดคล้องกับแม่แบบ เอฟเฟกต์โฮเวอร์ที่เพิ่มที่นี่จะแสดงมุมมนรอบ ๆ เมนูย่อยการนำทาง แต่ละลิงก์จะแสดงเป็นองค์ประกอบบล็อกและใช้พื้นที่ในเมนูย่อยมาก.
รายการคุณสมบัติซอฟต์แวร์
นี่อาจเป็นหนึ่งในตัวอย่างที่ฉันชอบในรายการสไตล์ นักพัฒนาเว็บและ บริษัท ซอฟต์แวร์ใช้สิ่งเหล่านี้ในการออกแบบเว็บขององค์กร ตัวอย่างของฉันมุ่งเน้นไปที่หน้าของสิ่งต่าง ๆ ของรหัสวัฒนธรรมแอพที่ต้องทำ พวกเขาได้สร้าง ชุดรูปแบบของรายการและคุณสมบัติ คุณสามารถค้นหาได้ในสิ่งต่าง ๆ.
คอลเลกชันทั้งหมด ถูกบรรจุอยู่ภายใน มีการเพิ่มรูปภาพเป็น มีองค์ประกอบต่าง ๆ เข้าด้วยกันอย่างสวยงามและฉันชื่นชมจรรยาบรรณในการทำงานของรหัสวัฒนธรรมอย่างมาก พวกเขาได้พิสูจน์แล้วว่าให้การออกแบบที่ยอดเยี่ยมในช่วงหลายปีที่ผ่านมาโดยเฉพาะอย่างยิ่งสำหรับสิ่งต่างๆ หากคุณตรวจสอบไดเรกทอรีไอคอนใด ๆ เช่น Icon Finder มันค่อนข้างง่ายที่จะเลือกชุดของ freebie และจากที่นี่คุณสามารถจำลองการออกแบบและโค้ดสไตล์รายการที่คล้ายกันใน CSS. หากคุณสนใจเพิ่มเติมในการออกแบบหน้า Things for iPhone ใช้รายการคำอธิบายจริง ๆ แต่ละไอคอนนั้น ตั้งเป็นคำนิยาม และคำอธิบายจะถูกวางไว้ทางด้านขวา นี่ไม่ใช่วิธีที่แนะนำให้ใช้แท็กเหล่านี้ แต่สามารถใช้งานได้ดีในบางสถานการณ์! ผู้ใช้ WordPress มีความคุ้นเคยกับระบบหมวดหมู่ / แท็ก มันทำงานได้ดีในรูปแบบส่วนใหญ่ของโซเชียลมีเดียจนถึงตอนนี้ แต่มันมาจาก blogosphere แท็กนั้นเหมาะสำหรับการแสดงบทความเฉพาะที่เกี่ยวข้องกับหัวข้อนั้น หมวดหมู่นั้นกว้างกว่ามากและใช้เพื่อครอบคลุมส่วนที่มากขึ้นของบทความของคุณ. ตัวอย่างที่ดีที่สุดที่ฉันนึกได้คือ Smashing Magazine และการออกแบบหน้าแรกใหม่ของพวกเขา ที่ด้านบนคุณจะสังเกตเห็นแท็บที่มีป้ายกำกับ “นิตยสาร” ด้วยไอคอนแท็กขนาดเล็กที่ห้อยอยู่ด้านข้าง โฮเวอร์เหนือสิ่งนี้เพื่อแสดงรายการหมวดหมู่ที่ซ่อนอยู่เช่นการเข้ารหัสการออกแบบกราฟิกและอื่น ๆ แต่ละประเภทยังมีสไตล์พร้อมเอฟเฟ็กต์ CSS3 แบบโฮเวอร์เพื่อให้ปรากฏเป็นปุ่มมัน. ดูรหัสคุณจะสังเกตเห็นว่าพวกเขาได้วางกล่องนี้ในพื้นที่คอลัมน์ด้านซ้าย มันได้รับ ฉันเป็นแฟนตัวยงของการออกแบบ Digg คลาสสิกเสมอ มันแสดงทุกอย่างที่คุณคาดหวังจากเว็บไซต์ข่าวที่มีความสามารถทางสังคมที่ยอดเยี่ยม สิ่งหนึ่งที่น่าสนใจจริงๆสำหรับการออกแบบเก่าของพวกเขาคือ การตั้งค่าคอลัมน์ส่วนท้ายโดยใช้รายการคำนิยาม. น่าเสียดายที่ทีมงาน Digg ได้เปิดตัว v4 design live แล้ว แต่อินเทอร์เน็ตเป็นสถานที่ที่คิดถึงและกับ Wayback Internet Archives เราสามารถดึงการออกแบบที่เก่ากว่าของ Digg ตั้งแต่เดือนสิงหาคมปี 2007 เทมเพลตนี้มีองค์ประกอบส่วนติดต่อผู้ใช้ที่ยอดเยี่ยมมากมาย โดยเฉพาะอย่างยิ่งเรามามุ่งเน้นที่ส่วนท้าย คุณจะสังเกตเห็นว่าแต่ละคอลัมน์ถูกแบ่งเป็นจริง องค์ประกอบรายการข้อมูล. คอลัมน์เหล่านี้คือ ตั้งค่าให้แสดงเป็นบล็อกและลอยถัดจากกันพร้อมความกว้างที่กำหนดไว้ล่วงหน้า. ข้อกำหนดของข้อมูลทำงานเป็นส่วนหัว ภายในรายการและปรากฏเพียงหนึ่งครั้งต่อหนึ่งคอลัมน์ ในความคิดของฉันนี่เป็นวิธีที่ดีกว่าและสะอาดกว่าในการสร้างรายการคำอธิบายของคุณ เป็นไปได้ที่จะใช้มากกว่าหนึ่งคำต่อรายการ แต่สิ่งนี้มักจะทำให้ HTML ของคุณยุ่งเหยิงและคุณสามารถติดตามรหัสได้อย่างรวดเร็ว สองคอลัมน์แรกมี ลิงก์ 6-7 รายการแสดงอยู่ด้านล่างเป็นข้อมูลเทมเพลตสำหรับอธิบายข้อความส่วนหัว, แต่หลังจากนี้คุณจะสังเกตเห็นคอลัมน์แตกออกจากการจัดรูปแบบเริ่มต้น. ตัวอย่างเช่นใต้ เครื่องมือ Digg & API มี เพียงสองคำจำกัดความข้อมูล. จริงๆแล้วคือย่อหน้า 2 ย่อหน้าที่มีลิงค์ภายในและประโยค แน่นอนว่าไม่มีอะไรผิดปกติกับมาร์กอัปนี้และจริงๆแล้วมันเป็นระบบที่สร้างสรรค์และยั่งยืนสำหรับการสร้างคอลัมน์ส่วนท้าย ฉันแน่ใจว่าถ้าคุณท่องหน้าเว็บของหน้า Digg คุณจะพบตัวอย่างที่ยอดเยี่ยมของรายการ. รายการไม่ได้รวมอยู่ในรูปแบบการออกแบบเสมอไป มีบางครั้งที่เนื้อหา ต้องใช้รายการในการสร้างรายการข้อมูลจริง. รายการสิ่งที่ต้องทำเป็นตัวอย่างที่สมบูรณ์แบบของปรากฏการณ์เหล่านี้ อย่างไรก็ตามมีตัวจัดการงานไม่มากนักที่สร้างขึ้นในเว็บดังนั้นจึงเป็นเรื่องยากที่จะหาตัวอย่างที่ดี. แอพ Flow เป็นบริการหนึ่งที่มีแผงผู้ใช้ที่สวยงาม หากคุณมีเวลาฉันขอแนะนำให้สมัครบัญชีฟรีเพื่อให้แอพสาธิต แม้ว่าคุณจะไม่ได้วางแผนที่จะจ่ายเงิน แต่มันก็ยังเป็นแอพพลิเคชั่นบนเว็บที่สนุกมากที่จะยุ่งเหยิงและคุณสามารถดึงแรงบันดาลใจในการออกแบบออกมาได้. หากคุณเข้าสู่ระบบเมนูด้านล่างซ้ายจะเรียงลำดับรายการของคุณ เหล่านี้คือภารกิจที่คุณสามารถจัดเรียงใหม่แก้ไขแท็กและตรวจสอบว่าเสร็จสมบูรณ์ คลิกที่รายการเริ่มต้นแรก “พื้นฐาน” จะเปิดเนื้อหาในบานหน้าต่างด้านขวาที่นี่โครงสร้างรายการทั้งหมดจะถูกสร้างขึ้นด้วยรายการที่ไม่ได้เรียงลำดับ. แต่ละรายการมีบริบทภายในค่อนข้างมาก แต่ละแถบที่คุณเห็นจะเจอของขวัญ เพิ่มหนึ่งรายการในรายการโดยรวม พร้อมกับนักออกแบบเพื่อนฉันเป็นคนติดยาเสพติดอย่างมาก เว็บไซต์สร้างขึ้นอย่างสวยงามและมีนักออกแบบกราฟิกที่ดีที่สุดจากทั่วทุกมุมโลก หากคุณไม่คุ้นเคยกับเครือข่าย Dribbble เป็นชุมชนโซเชียลที่ได้รับเชิญเท่านั้นของนักออกแบบเว็บไซต์ที่แบ่งปันภาพล่าสุดของงานนี้. สิ่งที่น่าสนใจหากคุณหันความสนใจไปที่ด้านล่างขวาของพื้นที่แถบด้านข้าง ที่นี่เรามีรายการสั่งซื้อกับชั้นเรียน “เล่นรายการ“. มันมีคุณสมบัติล่วงหน้าซึ่งเป็นนักออกแบบรุ่นใหม่ล่าสุดที่ได้รับคำเชิญและผู้ที่ลงชื่อเข้าใช้เว็บไซต์ล่าสุด ไม่ว่าจะด้วยเหตุผลใดก็ตามผู้พัฒนาเว็บของ Dribbble ได้เลือกที่จะใช้ รายการที่สั่งด้วยแต่ละรายการที่มีรายละเอียดเกี่ยวกับผู้ใช้. เนื้อหาภายในแบ่งออกเป็นสองส่วนจริง ๆ แล้ว. มีตัวอย่างที่ยอดเยี่ยมและแนวทางปฏิบัติที่เป็นลายลักษณ์อักษรที่ดีที่สุดสำหรับการสร้างการนำทางเกล็ดขนมปัง เมนูเหล่านี้แสดงให้เห็นอย่างชัดเจน คอลเล็กชันของลิงก์ย่อยที่คุณเข้าไปสำรวจเพื่อไปยังหน้าปัจจุบัน. เรามีการสอน breadcrumbs ที่ยอดเยี่ยมซึ่งให้ความสำคัญกับ Hongkiat ที่สร้างขึ้นอย่างสมบูรณ์ด้วยเทคนิค CSS3 และรายการที่ไม่มีการเรียงลำดับ. การออกแบบใช้ เชื่อมโยงจุดยึดเป็นองค์ประกอบบล็อก เพื่อแสดงเมนูรายการ การเชื่อมโยงจุดยึดจะได้รับภาพพื้นหลังและ การน้อยลงไป ตรวจสอบตัวอย่างของ Google ในหนึ่งในหน้าสนับสนุน นี่คือองค์ประกอบของหน้าที่สมบูรณ์แบบที่จะรวมเข้ากับเว็บไซต์ของคุณเองถ้าคุณมี หน้าซ้อนหลายหน้าของเนื้อหา. ผู้เข้าชมจะต้องกลับไปที่หน้าก่อนหน้าโดยไม่ตรวจสอบประวัติ. ไม่มีทางเลือกมากเกินไปสำหรับการสร้างรายการลิงก์ breadcrumb คุณสามารถใช้รายการสั่งซื้อได้ ซอฟต์แวร์รวบรวมข้อมูลของเครื่องมือค้นหาเข้าใจว่ามีคำสั่งไปยังลิงก์เมนู, อย่างไรก็ตามตามที่ระบุไว้ก่อนหน้านี้อาจจะไม่สร้างความแตกต่างมากเกินไปเมื่อมันมาถึงการจัดอันดับใน SERPS หากคุณมีความต้องการที่ซับซ้อนมากขึ้นสำหรับ breadcrumb เช่นชื่อเรื่อง / คำอธิบายสำหรับแต่ละลิงก์คุณอาจใช้องค์ประกอบรายการคำนิยามได้ดีขึ้น. โดยไม่ต้องลงรายละเอียดมากเกินไปมันเป็นเป้าหมายของฉันที่จะรวบรวมการตั้งค่าองค์ประกอบอินเตอร์เฟซที่ยอดเยี่ยม พูดง่ายกว่าทำ - แต่อินเทอร์เน็ตมีตัวเลือกมากมายให้เลือก! มีพื้นที่มากมายสำหรับการเติบโตในขอบเขตของรายการ HTML หากคุณกำลังจะตายเพื่อหาแรงบันดาลใจเพิ่มเติมลองดูที่แกลเลอรีขนาดเล็กด้านล่างพร้อมตัวอย่างที่ยอดเยี่ยม. เมนูนำทางที่ยอดเยี่ยมสไตล์เป็นองค์ประกอบปุ่ม. Cake Sweet Cake มีรายการรูปภาพขนาดย่อที่สวยงามซึ่งมีตัวอย่างงานเบเกอรี่แสนอร่อย. เว็บไซต์เชิญ Cheesemonger มี 2 แยกต่างหาก ลิงก์โซเชียลมีเดียที่ส่วนล่างของเว็บไซต์ของ Threepenny Editor นั้นสร้างขึ้นภายใต้รายการ มันลงตัวพอดีกับคอลัมน์ของชุดรูปแบบการจัดวางด้วยมือและกระดาษ. อีกตัวอย่างที่สวยงามของเมนูนำทางที่มีรูปภาพและ CSS. คุณรู้ว่าใครมีผลการออกแบบย้อนยุคแฟนซีบนเว็บไซต์ของพวกเขา ส่วนด้านล่างของหน้าแรกมีรายการสั่งซื้อขนาดเล็กซึ่งมีภาพขนาดย่อของโครงการล่าสุดของพวกเขา. รายการที่ไม่มีการเรียงลำดับที่สร้างขึ้นสำหรับแผนการลงทะเบียนของ MediaLoot ดูมีแนวโน้ม. 365psd เสนอเทมเพลต Photoshop ใหม่ล่าสุดสำหรับการดาวน์โหลดทุกวัน ในแถบด้านข้างคุณจะพบรายการแท็กที่สร้างไว้ในรายการที่ไม่เรียงลำดับ สิ่งนี้ดูสมบูรณ์แบบในบล็อกและหน้าเก็บถาวรซึ่งรายการแท็กขนาดเล็กนั้นเหมาะสม. หวังว่าแกลเลอรีของรายการสไตล์ HTML ที่สร้างสรรค์นี้ได้สร้างแรงบันดาลใจให้คุณในการออกแบบเนื้อหาเลย์เอาต์ อาจเป็นการยากที่จะกำหนดความคิดที่เป็นรูปธรรมสำหรับรายการของคุณบนหน้าเว็บ แต่รายการรายการเป็นส่วนสำคัญของกระบวนการออกแบบและ นำเสนอความสัมพันธ์ที่สร้างสรรค์ระหว่างแท็กมาร์กอัปและเนื้อหา. อาจมีรายการที่น่าอัศจรรย์อื่น ๆ อีกมากมายที่พบในเว็บและด้วยจำนวนนักออกแบบเว็บไซต์ที่เพิ่มขึ้นเราจะเห็นว่าจำนวนนี้เพิ่มขึ้นเร็วกว่าที่เคย หากคุณรู้จักเว็บไซต์ที่ยอดเยี่ยมที่มีรายการ HTML ที่ยอดเยี่ยมอย่าลังเลที่จะเสนอลิงก์ในส่วนความคิดเห็นของเราด้านล่าง นอกจากนี้หากคุณต่อท้ายสไตล์ที่ระบุไว้ข้างต้นในเว็บไซต์ของคุณเองเรายินดีที่จะตรวจสอบ!
องค์ประกอบที่มีคลาสซ้ายและขวา, ตามลำดับ เนื้อหารายการในรายการเป็นจริง แบ่งออกเป็นส่วน ๆ และ CSS ใช้เพื่อจัดตำแหน่งทุกอย่าง. แท็ก โดยตรงในรหัสและ อยู่ในตำแหน่งที่สัมพันธ์กับการบรรจุ
.
แข็งแรง
แท็ก จะใช้สำหรับแต่ละจุดส่วนหัวซึ่งปรากฏในข้อความเข้มและโดยตรงหลังจากนี้คำอธิบายจะถูกเพิ่ม.หมวดหมู่บล็อกและแท็ก
แสดง: ไม่มี;
สไตล์เพื่อ ปรากฏซ่อนจนกว่าจะถูกเรียกใช้. รายการที่ไม่ได้เรียงลำดับ ถูกตั้งค่าด้วยแต่ละรายการที่มีลิงค์ยึด, แต่เป็นทางเลือกลิงก์เหล่านี้ จะแสดงแบบอินไลน์และแตกออกเป็นสองบรรทัด สำหรับพื้นที่ที่ต้องการ.คอลัมน์ท้ายกระดาษที่มีรายการนิยาม
Tasks และ To-dos
ธาตุ. มีวัตถุภายในจำนวนมากเช่นไอคอนแก้ไขกล่องกาเครื่องหมายเสร็จสิ้นการตั้งค่าสถานะและไอคอนถังขยะด้วย นอกจากนี้ในลิงค์เมนูด้านข้างใต้ “โฟกัส” คุณจะสังเกตเห็น ไอเท็มที่สร้างขึ้นตั้งค่าเป็นรายการที่ไม่เรียงลำดับ. มันดูยอดเยี่ยมสำหรับความเรียบง่ายอย่างแน่นอน.รายชื่อผู้เล่น Dribbble
ส่วนหัวกับชั้นเรียน “vCard” มีชื่อผู้ใช้และรูปประจำตัว ทั้งสองนี้เชื่อมโยงกับโปรไฟล์ Dribbble ส่วนตัวพร้อมกับสถิติบัญชีบางอย่าง.
เกล็ดขนมปังแนวนอน
ดัชนี z
คุณสมบัติดังนั้นลูกศรจะแสดงที่ด้านบนของแต่ละองค์ประกอบที่เกิดขึ้นพร้อมกัน.รายการที่อิง UI ที่สวยงามยิ่งขึ้น
6wunderkinder
เค้กเค้กหวาน
Cheesemonger Invitational
องค์ประกอบลอยเพื่อสร้าง 1 เมนูนำทาง มันดูเรียบร้อยมากซึ่งสอดคล้องกับกราฟิกโลโก้ของพวกเขาที่อยู่ตรงกลาง.The Threepenny Editor
Le Tipi
คุณรู้ว่าใคร
MediaLoot
365psd
ข้อสรุป