บทนำสู่หน้าเว็บการผลิตหน้าเว็บ: การวิจัยและการประยุกต์ใช้องค์ประกอบรายการ HTML CSS รายการ UL, OL, DL
1. ถือได้ว่าเป็นคำนำหน้าไร้สาระองค์ประกอบรายการ HTML (เช่น OL, UL, DL) มีการใช้กันอย่างแพร่หลายในการพัฒนาเว็บไซต์และการผลิตในปัจจุบัน แต่อารมณ์ของพวกเขาแตกต่างกันในเบราว์เซอร์ที่แตกต่างกัน บทความนี้วิเคราะห์ลักษณะพื้นฐานขององค์ประกอบรายการเหล่านี้ปัญหาความเข้ากันได้ที่หลากหลายในเบราว์เซอร์ที่แตกต่างกันและแนะนำแอปพลิเคชันทั่วไปบางอย่าง
ควรเป็นประโยชน์สำหรับผู้เริ่มต้นหรือผู้ที่มีประสบการณ์ใน CSS
2. รายการองค์ประกอบที่มีอยู่ใน HTML 1. รายการที่ไม่ได้เรียงลำดับ: ULรายการที่ไม่ได้เรียงลำดับเป็นรายการที่ใช้กันมากที่สุด รูปต่อไปนี้แสดงการแสดงรายการที่ไม่ได้เรียงลำดับในเบราว์เซอร์ที่แตกต่างกัน:
หน้าสาธิต
ดังที่แสดงไว้ข้างต้นการตั้งค่าเริ่มต้นของรายการที่ไม่ได้เรียงลำดับภายใต้เบราว์เซอร์ที่แตกต่างกันจะแตกต่างกันเล็กน้อย แน่นอนว่ามีรายการที่ไม่ได้เรียงลำดับไม่กี่รายการที่ไม่ได้แก้ไขในโครงการเว็บไซต์จริงในปัจจุบัน หนึ่งในเหตุผลคือการรีเซ็ต CSS ซึ่งได้ลบกระสุนรายการเริ่มต้นระยะขอบหรือพายสำหรับรายการที่ไม่ได้เรียงลำดับ
คุณสมบัติ CSS เฉพาะบางรายการของรายการที่ไม่ได้เรียงลำดับคือรายการประเภทรายการสไตล์รายการและภาพสไตล์รายการ คุณสมบัติเหล่านี้ตั้งค่าประเภทของกระสุนรายการตำแหน่งของแท็กและการใช้รูปภาพแทนแท็ก คุณสมบัติทั้งสามนี้สามารถรวมเข้ากับสไตล์รายการ
แอตทริบิวต์ประเภทรายการสามารถตั้งค่าเป็นค่าที่แตกต่างกันบางอย่าง แผนภูมิต่อไปนี้แสดงเอฟเฟกต์หน้าของค่าบางอย่าง:
ขึ้นอยู่กับเบราว์เซอร์ของผู้ใช้และระบบปฏิบัติการค่ารายการรายการบางรายการอาจไม่แสดงอย่างถูกต้องและมักจะเริ่มต้นเป็นค่าทศนิยม ไม่แนะนำให้ใช้รายการที่ไม่จำเป็นเพื่อเพิ่มมูลค่าเนื่องจากความหมายของรายการที่ไม่ได้เรียงลำดับนั้นไม่มีอยู่อีกต่อไป
สามารถตั้งค่าตำแหน่งสไตล์รายการเป็นภายนอก (ค่าเริ่มต้น) หรือภายในสำหรับตำแหน่งของแท็กรายการ หากมีการตั้งค่าภาพสไตล์รายการมันจะส่งผลกระทบต่อตำแหน่งของภาพ
แอตทริบิวต์รูปถ่ายสไตล์รายการสามารถให้รายการประสิทธิภาพที่ไม่ซ้ำกันที่ไม่ได้เรียงลำดับ น่าเสียดายที่การใช้วิธีนี้เพื่อเพิ่มหมายเลขโครงการใน IE นั้นมีข้อบกพร่องมากมายดังนั้นจึงไม่ค่อยได้ใช้ ทางออกที่ดีกว่าคือการเพิ่มอิมเมจพื้นหลังลงในองค์ประกอบ LI ของรายการและปรับตำแหน่งของภาพพื้นหลังตามนั้นและตั้งค่าเป็นซ้ำ บน maxdesign.com วิธีนี้ได้รับการสาธิตผ่านคำอธิบายทีละขั้นตอนและทำงานได้ดีในเบราว์เซอร์ทั้งหมด
2. รายการสั่งซื้อ: olรายการที่สั่งซื้อจะใช้เมื่อจำเป็นต้องเพิ่มค่าที่เพิ่มขึ้นด้านหน้าของรายการแต่ละรายการของรายการ (เช่น 1, 2, 3, ฯลฯ ) ประเภทรายการประเภทรายการประเภทของรายการที่สั่งซื้อสามารถตั้งค่าเป็นค่าใด ๆ ที่สามารถตั้งค่าภายใต้รายการที่ไม่ได้เรียงลำดับ ในกรณีส่วนใหญ่รายการที่สั่งซื้อจะถูกนำหน้าด้วยค่าที่เพิ่มขึ้นหรือไม่ได้นำหน้าด้วยเครื่องหมายใด ๆ ไม่แนะนำให้ใช้รายการที่สั่งซื้อเพื่อให้ได้พฤติกรรมคล้ายกับรายการที่ไม่ได้เรียงลำดับ ด้วยเหตุนี้ความหมายของรายการที่สั่งซื้อเองจึงไม่ถูกต้องอีกต่อไป
3. รายการนิยาม: DLรายการคำจำกัดความใช้เพื่อทำเครื่องหมายรายการรายการที่กำหนดซึ่งรวมถึงชื่อนิยาม (DT) และคำจำกัดความของตัวเอง (DD) ไม่จำเป็นต้องจับคู่กันเมื่อกำหนดรายการรายการต่อไปนี้ถูกกฎหมายอย่างสมบูรณ์ภายใต้ XHTML ที่เข้มงวด:
<Dl> <Dt> เพลงไร้สาย miguhui </dt> <dt> การประชุมโคเปนเฮเกน </dt> <dd> "ตุลาคม Siege" </dd> </dl>
วิธีนี้คุณสามารถใช้ DT หลายตัวภายใต้ DD เดียวหรือ DDs หลายตัวภายใต้ DT เดียว
กำหนดจอแสดงผลภาพของรายการ โดยค่าเริ่มต้นการแสดงผลของแต่ละเบราว์เซอร์เกือบจะเหมือนกับที่แสดงในรูปด้านล่าง:
หน้าสาธิต
รหัส HTML ที่สอดคล้องกับภาพด้านบนมีดังนี้:
<dl> <dt> title </dt> <dd> นี่คือคำจำกัดความ </dd> </dl> <dl> <dt> ภาพยนตร์ยอดนิยม </dt> <dd> ตุลาคม Siege </dd> <dd> taoLing </dd> <dd> สามปืน หัวข้อ </dt> <dd> ตลาดหุ้น </dd> <dd> ราคาบ้าน </dd> <dd> วันปีใหม่ </dd> <dd> สุสานของ Cao Cao </dd> </dl> 4. รายการล้าสมัย: เมนู & Dir
<เมนู> และ <ir> องค์ประกอบทางเทคนิคสามารถเรียกได้ว่ารายการ HTML แต่พวกเขาล้าสมัยใน XHTML ดังนั้นพวกเขาจึงไม่ได้กล่าวถึงรายละเอียดที่นี่
5. รายการใน HTML5ใน HTML รายการที่ไม่ได้เรียงลำดับยังคงเหมือนเดิมแม้ว่าตอนนี้ดูเหมือนว่าตอนนี้มันจะเรียกว่ารายการและองค์ประกอบใหม่จะถูกใช้เพื่อห่อรายการเป็นการนำทาง
องค์ประกอบ OL มีการเปลี่ยนแปลงเล็กน้อยและได้รับคุณสมบัติใหม่สองประการ: กลับด้านซึ่งเป็นค่าบูลีนเพื่อระบุว่ารายการเพิ่มขึ้นหรือตก; เริ่มต้นซึ่งเป็นจำนวนเต็มที่จะประกาศจุดเริ่มต้นของรายการที่สั่งซื้อ
นอกจากนี้จะมีการเพิ่มองค์ประกอบ <pigive> และ <betigitals> และพวกเขาจะมีองค์ประกอบของเด็กรวมถึงองค์ประกอบ <dt> และ <dd>
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ HTML5 โปรดดูบทความนี้เกี่ยวกับ HTML5 และ CSS3 ของ Taobao Kongyan [Baibiao Milk Tea Gang] นอกจากนี้คุณสามารถคลิกที่นี่เพื่อดู PPT ออนไลน์
3. เบราว์เซอร์ความแตกต่างต่อไปนี้เป็นความแตกต่างของเบราว์เซอร์ทั่วไปและชัดเจน
1. หลังจากเพิ่มการแสดงผล: บล็อกลงในรายการองค์ประกอบภายใต้ Internet Explorer 8, Opera 9, Chrome, Firefox 2 & 3 และ Safari, การเพิ่มจอแสดงผล: บล็อกจะทำให้จำนวนรายการของรายการ LI ในรายการที่สั่งซื้อหรือไม่เรียงลำดับหายไป
แต่ภายใต้ IE6 และ IE7 การเพิ่มจอแสดงผล: BLOCK BULLET ยังคงมีอยู่:
หน้าสาธิต
2. เพิ่ม Float: ซ้ายไปยังรายการภายใต้ IE6 และ IE7 การเพิ่มลอย: ซ้ายไปยังรายการ (ไม่มีสไตล์อื่น ๆ ) จะทำให้รายการจัดเรียงในแนวนอนในขณะที่กระสุน (หรือหมายเลขรายการ) หายไป ดังที่แสดงในรูปด้านล่างจะถูกตัดจากเบราว์เซอร์ IE7
ภายใต้ IE8 และเบราว์เซอร์อื่น ๆ ทั้งหมดรายการจะอยู่ในแนวนอน แต่กระสุน (หรือหมายเลขโครงการ) ยังคงปรากฏอยู่
หน้าสาธิต
เมื่อรายการลอยตัวเราต้องจำจุดสำคัญอื่นนั่นคือรายการคอนเทนเนอร์รายการ (องค์ประกอบ UL) จะตายเมื่อมีองค์ประกอบลอยอยู่ภายในเท่านั้น สิ่งนี้จะเกิดขึ้นในลักษณะเดียวกันในเบราว์เซอร์ทั้งหมด การเพิ่มการล้น: Hidden เป็นหนึ่งในวิธีแก้ปัญหานี้
เพื่อให้ได้การลอยตัวเดียวกันโดยประมาณ: เอฟเฟกต์ด้านซ้ายในเบราว์เซอร์ที่แตกต่างกันวิธีที่ดีที่สุดคือใช้การแสดงผล: อินไลน์
3. มีรายการเลย์เอาต์ที่สั่งซื้อภายใต้ IEภายใต้ IE6 และ IE7 หากรายการในรายการที่สั่งซื้อมีเค้าโครงค่าของรายการที่สั่งซื้อจะไม่เพิ่มขึ้นและจะแสดงเป็น 1 ดังที่แสดงในรูปด้านล่าง:
หน้าสาธิต
คุณสมบัติ Haslayout ไม่สามารถตั้งค่าได้โดยตรง แต่ถ้าองค์ประกอบถูกตั้งค่าให้มีความกว้างความสูงลอยการวางตำแหน่งสัมบูรณ์การรอคอยจะเปลี่ยน Haslayout
4. การขยายและอัตรากำไรขั้นต้นภายใต้ IE6 & IE7ในเบราว์เซอร์ส่วนใหญ่เพื่อลบกระสุนหรือหมายเลขโครงการและเพื่อจัดแนวด้านซ้ายของเนื้อหาคุณต้องตั้งค่าช่องว่างด้านซ้ายเป็น 0 แต่สิ่งนี้ไม่ทำงานใน IE6 และ IE7 ใน IE6 และ 7 คุณต้องตั้งค่าขอบซ้ายเป็น 0 และแทนที่ ดูภาพด้านล่าง:
หน้าสาธิต
5. ใช้สไตล์รายการที่สอดคล้องกันในเบราว์เซอร์เพื่อหลีกเลี่ยงปัญหาเมื่อจัดการสไตล์รายการภายใต้เบราว์เซอร์ที่แตกต่างกันวิธีที่ดีที่สุดคือใช้การรีเซ็ต CSS ที่กล่าวถึงข้างต้น การรีเซ็ต CSS สามารถตั้งค่าความแตกต่างการตั้งค่าเริ่มต้นได้เกือบทั้งหมดในเบราว์เซอร์และอนุญาตให้เบราว์เซอร์ทั้งหมดทำงานบนพื้นฐานเดียวกัน แม้ว่าจะยังมีความแตกต่างในบางรูปแบบ แต่พวกเขาจะไม่ได้รับการปฏิบัติเหมือนเป็นจุดที่ยาก
นอกจากนี้ดังที่ได้กล่าวไว้ก่อนหน้านี้เป็นการดีที่สุดที่จะหลีกเลี่ยงการใช้คุณสมบัติรูปถ่ายสไตล์รายการโดยสิ้นเชิงและตั้งค่าพื้นหลังแทนแทนการแก้ปัญหาเชิงสัญลักษณ์ที่กำหนดเองสำหรับรายการข้ามเบราว์เซอร์
4. ตัวอย่างและแอปพลิเคชันบางอย่าง 1. แถบนำทางจนถึงตอนนี้การใช้รายการที่ไม่ได้เรียงลำดับมากที่สุดคือแถบการนำทางไม่ว่าจะเป็นแนวนอนหรือแนวตั้ง เนื่องจากเลย์เอาต์บนตารางล้าสมัยรายการที่ไม่ได้เรียงลำดับจึงถูกนำมาใช้อย่างกว้างขวางเป็นพื้นฐานสำหรับองค์ประกอบการนำทางด้วยเหตุผลต่อไปนี้:
•รายการที่ไม่ได้เรียงลำดับเป็นองค์ประกอบระดับบล็อกและไม่จำเป็นต้องห่อ div ด้านนอกเพื่อใช้พื้นหลังหรือส่วนขยายกราฟิกอื่น ๆ
•เมื่อสไตล์ถูกปิดใช้งานสไตล์รายการจะถูกปรับลดลงอย่างสงบการรักษาสไตล์ดั้งเดิมซึ่งสามารถมั่นใจได้ว่ารายการการนำทางจะแตกต่างจากเนื้อหาอื่น ๆ ในหน้า
•แม้ว่ารายการที่ไม่ได้เรียงลำดับไม่ได้เป็นเพียงรายการง่าย ๆ การเพิ่มองค์ประกอบเช่นแท็ก <a> องค์ประกอบ <li> เพิ่มเติมจะทำให้แถบการนำทาง Express ในรูปแบบที่ยืดหยุ่นมากขึ้น
•การนำทางแบ่งออกเป็นรายการและ/หรือ sublists ช่วยให้สามารถใช้เทคโนโลยีเสริม (เช่นตัวอ่านหน้าจอ) ที่ผู้ใช้สามารถข้ามแถบการนำทางทั้งหมดได้อย่างง่ายดาย
ตัวอย่างเช่น: เมนูเอฟเฟกต์พิเศษ Lavalamp ใช้งานโดยใช้ jQuery
2. ดึงเมนูลงตัวอย่างเช่นตัวอย่างของเมนูแบบเลื่อนลงที่ฉันทำเมื่อไม่นานมานี้: jQuery ใช้ slidetoggle เพื่อใช้เมนูดรอปดาวน์แนวตั้ง
การสาธิตเอฟเฟกต์
3. การแสดงภาพHTML List Tag ul, Li เป็นวิธีที่มีประสิทธิภาพในการแสดงรายการภาพถ่ายด้วยเหตุผลเดียวกับที่กล่าวไว้ข้างต้นในแถบการนำทาง ด้านล่างนี้เป็นแกลเลอรี่ภาพถ่ายหรือส่วนประกอบการแสดงภาพที่ใช้แท็ก HTML
jcarousel
JCAROUSEL SWITHING SWITHING PLUGNAL JQUERY PLUGING IN ให้ฟังก์ชั่น jQuery ที่ปรับแต่งได้โดยใช้รายการที่ไม่ได้เรียงลำดับและสามารถแสดงเอฟเฟกต์การส่งผ่านได้หลายวิธี ฉันได้แปลปลั๊กอินนี้เป็นภาษาจีนคุณสามารถคลิกที่นี่อย่างรุนแรง: โฮมเพจภาษาจีน jcarousel
Innerfade - jQuery
ปลั๊กอิน innerfade สามารถเปิดใช้งานเนื้อหารูปแบบรายการใด ๆ ที่จะจางหายไปและออกเพื่อสลับการแสดงผลหรือเพื่อเปลี่ยนการแสดงผลขึ้นและลง เนื้อหาสามารถเป็นข้อความรูปภาพ ฯลฯ รองรับแท็กต่าง ๆ แท็กรายการ ul, li, div และ p แท็ก
มันสามารถรับรู้การสลับการสลับการสุ่มอัตโนมัติของเนื้อหาหรือเนื้อหาการประกาศหรือการแสดงการเล่นสไลด์โชว์รูปภาพ ฯลฯ รูปต่อไปนี้แสดงขั้นตอนการเปลี่ยนภาพของการสลับภาพสไลด์:
การสาธิตปลั๊กอินนี้ยากที่จะคลิกที่นี่: หน้าสาธิต InnerFade
4. รหัสถูกเน้นบล็อกและเว็บไซต์บทช่วยสอนจำนวนมากมีรหัสไฮไลต์ JavaScript ที่แปลงองค์ประกอบก่อนหรือองค์ประกอบ textarea เป็นรายการที่สั่งซื้อดังที่แสดงในภาพหน้าจอต่อไปนี้ หนึ่งในรหัสที่มีชื่อเสียงที่เน้นปลั๊กอินคือ Syntaxhighlighter ของ Alex Gorbatchev
ด้านล่างนี้เป็นภาพหน้าจอของเอฟเฟกต์ที่คล้ายกับปลั๊กอินที่ไฮไลต์:
คุณสามารถคลิกที่นี่เพื่อดูตัวอย่างเอฟเฟกต์ (หน้าสาธิตแสดงรหัสปลั๊กอินคุกกี้ jQuery)
5. บล็อกความคิดเห็นความคิดเห็นของบล็อกรวมถึงเว็บไซต์ที่ขับเคลื่อนด้วย WordPress เหล่านี้ถูกสร้างขึ้นในรายการที่สั่งซื้อเสนอตัวเลือกการจัดแต่งทรงผมที่ยืดหยุ่นมากและวางรากฐานสำหรับการแสดงความคิดเห็น ภาพต่อไปนี้เป็นภาพหน้าจอจากส่วนความคิดเห็นของเรื่องราวของ Mr.Gray - การออกแบบการโต้ตอบเว็บสีเทา 8 บทความแอปพลิเคชันที่เผยแพร่โดย Tencent CDC TD เมื่อวานนี้
6. รายการผลิตภัณฑ์ตัวแทนทั่วไปที่สุดคือการแสดงหมวดหมู่ผลิตภัณฑ์หลายพันรายการในคอลัมน์หมวดหมู่ทารกของหน้าแรกของ Taobao:
ดังที่เห็นได้จากภาพหน้าจอวัตถุประสงค์ของหมวดหมู่นี้จะแสดงโดยใช้รายการนิยาม DL, DT และ DD
7. คนอื่น ๆมีแอพพลิเคชั่นอื่น ๆ อีกมากมายสำหรับองค์ประกอบรายการเช่นแถบความคืบหน้าสำหรับการอัปโหลดหลายภาพเมนู CSS Step, เมนูที่ทับซ้อนกันและอื่น ๆ ฉันจะไม่แสดงให้พวกเขาเห็นทีละคน
5. สรุปที่แจกจ่ายได้องค์ประกอบแท็ก HTML คืออิฐและกระเบื้องซึ่งดูธรรมดามาก แต่เมื่อพูดถึงนักออกแบบที่ยอดเยี่ยมและคนงานที่ยอดเยี่ยมพวกเขาจะออกแรงศักยภาพและเสน่ห์ที่ไม่มีที่สิ้นสุดดังนั้นเราจึงมีอินเทอร์เน็ตที่มีสีสัน เช่นเดียวกับองค์ประกอบของรายการ แม้ว่าจะมีการใช้งานและเทคนิคอีกมากมายในการหารือในบทความนี้ แต่บางสิ่งที่แสดงในบทความนี้จะทำให้เราเข้าใจภาพรวมขององค์ประกอบแท็กรายการใน HTML อย่างละเอียดเพื่อช่วยให้คุณสร้างอาคารอินเทอร์เน็ตที่สวยงามด้วยอิฐเช่นรายการ
6. การอ่านอ้างอิงและการอ่านเพิ่มเติม• listamatic
• CSS Design: Taming Lists
•รายการ CSS บน W3Schools
•รายการคำจำกัดความ - ใช้ผิดหรือเข้าใจผิด?
•รายการสไตล์ CSS: การสาธิต 20+ บทเรียนและแนวทางปฏิบัติที่ดีที่สุด
•รายการองค์ประกอบในการอ้างอิง HTML ของ SitePoint