องค์ประกอบจากอินไลน์ถึงบล็อก นอกจากนี้ ยังมีการเพิ่มกรอบด้านซ้ายและด้านล่างลงในรายการอีกด้วย

#navbar a ( สีพื้นหลัง: #949494; สี: #fff; การขยาย: 5px; การตกแต่งข้อความ: ไม่มี; น้ำหนักแบบอักษร: ตัวหนา; ขอบซ้าย: 5px ทึบ #33ADFF; จอแสดงผล: บล็อก; ) #navbar li ( ขอบซ้าย: 10px ทึบ #666; ขอบล่าง: 1px ทึบ #666 )

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

ชื่อเอกสาร #navbar ( ระยะขอบ: 0; การขยาย: 0; list-style-type: none; ความกว้าง: 100px; ) #navbar li ( เส้นขอบซ้าย: 10px solid #666; border-bottom: 1px solid #666; ) # navbar a ( สีพื้นหลัง: #949494; สี: #fff; การขยาย: 5px; การตกแต่งข้อความ: ไม่มี; น้ำหนักแบบอักษร: ตัวหนา; ขอบซ้าย: 5px solid #33ADFF; จอแสดงผล: บล็อก; )

• บ้าน
• รายการของเราจะมีลิงค์เดียว:
• ข่าว
• รายชื่อผู้ติดต่อ

เมื่อคุณวางเมาส์ไว้เหนือรายการเมนู ลักษณะที่ปรากฏอาจเปลี่ยนแปลงไป เพื่อดึงดูดความสนใจของผู้ใช้ คุณสามารถสร้างเอฟเฟกต์ดังกล่าวได้โดยใช้คลาสหลอก:โฮเวอร์

กลับไปที่ตัวอย่างเมนูแนวตั้งที่กล่าวถึงก่อนหน้านี้ และเพิ่มกฎต่อไปนี้ลงในสไตล์ชีต:

#navbar a:hover ( สีพื้นหลัง: #666; ขอบซ้าย: 5px solid #3333FF; ) ลอง »

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

คุณสามารถสร้างเมนูแนวนอนได้โดยจัดสไตล์รายการปกติ แสดงคุณสมบัติสำหรับองค์ประกอบ

หากต้องการวางรายการเมนูในแนวนอน ขั้นแรกให้สร้างรายการสัญลักษณ์แสดงหัวข้อย่อยพร้อมลิงก์:

• บ้าน
• รายการของเราจะมีลิงค์เดียว:
• ข่าว
• รายชื่อผู้ติดต่อ

มาเขียนกฎสองสามข้อสำหรับรายการของเราซึ่งจะรีเซ็ตสไตล์เริ่มต้นที่ใช้สำหรับรายการ และกำหนดรายการรายการใหม่จากบล็อกเป็นแบบอินไลน์:

#navbar ( ระยะขอบ: 0; การขยาย: 0; list-style-type: none; ) #navbar li ( จอแสดงผล: อินไลน์; ) ลอง »

ตอนนี้สิ่งที่เราต้องทำคือกำหนดสไตล์สำหรับเมนูแนวนอนของเรา:

#navbar ( ระยะขอบ: 0; ช่องว่างภายใน: 0; ประเภทรายการสไตล์: ไม่มี; เส้นขอบ: 2px solid #0066FF; รัศมีเส้นขอบ: 20px 5px; ความกว้าง: 550px; การจัดตำแหน่งข้อความ: กึ่งกลาง; สีพื้นหลัง: #33ADFF; ) #navbar a ( สี: #fff; การขยาย: 5px 10px; การตกแต่งข้อความ: ไม่มี; น้ำหนักแบบอักษร: ตัวหนา; จอแสดงผล: บล็อกอินไลน์; ความกว้าง: 100px; ) #navbar a:hover ( รัศมีเส้นขอบ: 20px 5px ; สีพื้นหลัง: #0066FF ) ลอง »

เมนูที่เราจะสร้างจะมีลิงก์การนำทางหลักอยู่ในแถบนำทางแนวนอน และรายการย่อยที่จะปรากฏเฉพาะเมื่อคุณวางเมาส์เหนือรายการเมนูที่เกี่ยวข้องกับรายการย่อยเหล่านี้

ก่อนอื่นเราต้องสร้างโครงสร้าง HTML ของเมนูของเรา เราจะวางลิงก์การนำทางหลักไว้ในรายการสัญลักษณ์แสดงหัวข้อย่อย:

• บ้าน
• รายการของเราจะมีลิงค์เดียว:
• ข่าว
• รายชื่อผู้ติดต่อ

เราจะวางรายการย่อยไว้ในรายการแยกต่างหาก โดยซ้อนไว้ในองค์ประกอบ

• บ้าน
• รายการของเราจะมีลิงค์เดียว:
• รายชื่อผู้ติดต่อ
  • ที่อยู่
  • โทรศัพท์
  • อีเมล
• รายชื่อผู้ติดต่อ

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

#navbar ul ( จอแสดงผล: none; ) #navbar li:hover ul ( จอแสดงผล: block; )

เราลบการเยื้องและเครื่องหมายเริ่มต้นออกจากทั้งสองรายการ เราสร้างองค์ประกอบรายการที่มีลิงก์การนำทางลอยอยู่ โดยสร้างเมนูแนวนอน แต่สำหรับองค์ประกอบรายการที่มีรายการย่อย เราตั้งค่า float: none; จึงปรากฏอยู่เบื้องล่างกัน

#navbar, #navbar ul ( ระยะขอบ: 0; การขยาย: 0; list-style-type: none; ) #navbar li ( float: left; ) #navbar ul li ( float: none; )

ต่อไป เราต้องแน่ใจว่าเมนูย่อยแบบเลื่อนลงของเราไม่ได้ดันเนื้อหาที่อยู่ด้านล่างแถบนำทางลง ในการทำเช่นนี้ เราจะตั้งค่าตำแหน่งรายการ: สัมพันธ์; และรายการที่มีตำแหน่งรายการย่อย: สัมบูรณ์; และเพิ่มคุณสมบัติอันดับต้นๆ ที่มีค่า 100% เพื่อให้เมนูย่อยในตำแหน่งที่แน่นอนปรากฏใต้ลิงก์ทุกประการ

#navbar ul ( จอแสดงผล: none; ตำแหน่ง: แน่นอน; ด้านบน: 100%; ) #navbar li ( float: left; ตำแหน่ง: ญาติ; ) #navbar ( ความสูง: 30px; ) ลอง »

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

ตอนนี้เราแค่ต้องจัดสไตล์รายการทั้งสองของเรา จากนั้นเมนูแบบเลื่อนลงก็จะพร้อม:

#navbar ul ( จอแสดงผล: none; สีพื้นหลัง: #f90; ตำแหน่ง: แน่นอน; ด้านบน: 100%; ) #navbar li:hover ul ( จอแสดงผล: block; ) #navbar, #navbar ul ( ระยะขอบ: 0; การขยาย: 0; list-style-type: none; ) #navbar li ( ลอย: ซ้าย; ตำแหน่ง: สัมพันธ์; ความสูง: 100%; ) #navbar li a ( จอแสดงผล: block; padding: 6px; width: 100px; color: #fff; การตกแต่งข้อความ: none; text-align: center; ) #navbar ul li ( float: none; ) #navbar li:hover ( สีพื้นหลัง: #f90; ) #navbar ul li:hover ( สีพื้นหลัง: #666; )

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

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

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

ตัวอย่างเช่น ในการสร้างเมนู เราใช้รายการที่มี class class="menu" (ชื่อคลาสใดก็ได้ เฉพาะตัวอักษรละติน) และโค้ด html จะมีลักษณะดังนี้:

• บ้าน
• บทความ
• เกี่ยวกับฉัน
• ข่าว

ในการจัดสไตล์เมนู ฉันระบุคุณสมบัติที่ต้องการด้วยค่าที่ต้องการ:

พารามิเตอร์และค่า CSS ที่จำเป็น

• ระยะขอบ: 0;
• - ลบการเยื้องรายการทั้งหมด มิฉะนั้นเบราว์เซอร์จะแทนที่ค่าเริ่มต้นที่ 20px

รายการสไตล์ประเภท: ไม่มี;

นี่คือวิธีการสร้างเมนูบนหน้า html และตอนนี้เรามาดูการสร้างเมนูแนวนอนและดูทุกอย่างพร้อมตัวอย่างกัน

• บ้าน
• บทความ
• เกี่ยวกับฉัน
• ข่าว

ในการแสดงเมนูแนวนอนโดยใช้รายการ เราเพียงแค่ต้องเพิ่มพารามิเตอร์เพียงตัวเดียวในโค้ดด้านบน: display: inline; เพื่อให้รายการเมนูเรียงกันเป็นบรรทัดเดียวและเรียงกันในแนวนอน นอกจากนี้เรายังจะเพิ่มช่องว่างระหว่างรายการเมนูโดยใช้ระยะขอบ

เรามีเมนูแนวนอนพร้อมแล้ว เหลือแค่ทำให้ดูสวยงาม

ให้แต่ละรายการในเมนูแนวนอนมีกรอบเส้นขอบและทำให้มีขอบที่เอียง เติมสีพื้นหลังที่ต้องการ (เพิ่มพื้นหลังสำหรับรายการเมนู) และเปลี่ยนรูปลักษณ์ของลิงก์

• บ้าน
• บทความ
• เกี่ยวกับฉัน
• ข่าว

เมนูแนวนอนจะแสดงดังนี้:

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

และเพื่อความชัดเจน ฉันจึงทำให้รายการเมนูอยู่กึ่งกลางโดยใช้คุณสมบัติ text-align: center; ซึ่งสามารถลบออกได้ (จัดชิดซ้ายโดยอัตโนมัติ) หรือตั้งค่าเป็นจัดตำแหน่งข้อความ: ขวา;

และเมนูแนวนอนจะปรากฏที่ขอบด้านขวา

วิธีสร้างเมนูแนวตั้งด้วย CSS

เมนูแนวตั้งใน CSS ถูกสร้างขึ้นและออกแบบบนเพจในลักษณะเดียวกับเมนูแนวนอน แต่ที่นี่เท่านั้นที่มีการเปลี่ยนแปลงใน .menu-2 li (... พารามิเตอร์พร้อมการแสดงค่า: block; (ระบุองค์ประกอบบล็อก ) ซึ่งจะทำให้รายการเมนูแสดงรายการในแนวตั้ง

และอีกหนึ่งเมนูแนวตั้ง: เนื่องจากในกรณีส่วนใหญ่จะอยู่ในคอลัมน์ด้านข้างของไซต์ซึ่งมีความกว้างคงที่ เราจึงถูกบังคับให้ตั้งค่าความกว้างเป็นความกว้าง: 100%;

• เมนูแรก
• เมนูที่สอง
• เมนูที่สาม
• เมนูที่สี่

เมนูแนวตั้งจะปรากฏบนหน้าดังนี้:

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

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

อย่าลืมจำไว้!
เพื่อให้เมนูแบบเลื่อนลงปรากฏตรงข้ามลิงก์นำอย่างเคร่งครัด คุณต้องเขียนตำแหน่ง: ญาติ; ใน CSS สำหรับแท็ก li ซึ่งเป็นที่ตั้งของลิงก์นี้ และสำหรับตำแหน่งเมนูแบบเลื่อนลง: สัมบูรณ์;

มาเขียนโค้ด html สำหรับเมนูแบบเลื่อนลงใน CSS

• เมนูแรก
• ) .menu-4 .podmenu li, .podmenu .podmenu-2 li ( margin: 0; padding: 0; สีพื้นหลัง: #ccc; border-left: 0 solid #273ed9; transition: ทั้งหมด 0.7s ค่อยๆ 0s; แสดงผล : block; ) .menu-4 .podmenu li a, .podmenu .podmenu-2 li a ( เส้นขอบซ้าย: 0 ทึบ #900000; การขยาย: 4px 10px; สี: #444; ขนาดตัวอักษร: 14px; เส้นขอบล่าง : 1px จุด #999; ) .menu-4 .podmenu li a:hover, .podmenu .podmenu-2 li a:hover ( สี: #0e25c0; )
  • รายการเมนูที่สอง ⇒
  • ย่อหน้าแรก
  • ย่อหน้าที่สอง
    • ย่อหน้าที่สาม ⇒
    • ลิงค์แรก
    • ลิงค์ที่สอง
    • ลิงค์ที่สาม
  • ลิงค์ที่สี่
• ย่อหน้าที่สี่
  • ย่อหน้าที่สาม ⇒
  • ลิงค์แรก
  • ลิงค์ที่สอง
  • ลิงค์ที่สาม
• เมนูที่สี่

รายการเมนูที่สาม ⇒

ดูว่าเมนูแบบเลื่อนลงที่ใช้ CSS จะมีลักษณะอย่างไรบนหน้าเว็บ

เมนูแบบเลื่อนลงเขียนในลักษณะเดียวกับเค้าโครงการนำทางแนวนอนทุกประการ สิ่งเดียวคืออย่าลืมเปลี่ยนค่าของพารามิเตอร์ด้านบนและด้านซ้าย (เยื้องด้านบนและด้านซ้าย)
ดู!

ด้วยการเปลี่ยนแปลง CSS เพียง 3 ครั้ง รูปแบบการนำทางแนวตั้งของเราที่มีเมนูแบบเลื่อนลงจึงกลายเป็นรูปแบบการนำทางแนวนอนพร้อมเมนูแบบเลื่อนลง

• การเปลี่ยนแปลง CSS สำหรับเมนูแบบเลื่อนลง
• แทนที่ใน .saitbar - ความกว้าง: 240px;
• ความกว้าง: 100%;
• แทนที่ใน .menu-4 li - display: block;

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

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

ฉันสร้างโครงสร้างเมนูทั้งหมดในรูปแบบของรายการที่ไม่เรียงลำดับ โดยวางไว้ในบล็อก div ที่มีคลาสเฉพาะ “menu-nav” เพื่อเชื่อมโยงกับ .

• บ้าน
• บทเรียน
  • HTML/ซีเอสเอส
  • โฟโต้ชอป
  • ดรีมวีฟเวอร์
  • แฟลช
• วีดีโอ
  • ยูทูป
  • วิมีโอ
  • รูทูบ
• โปรแกรม
  • ระบบ
  • ความปลอดภัย
  • มัลติมีเดีย
  • อินเทอร์เน็ต
• ออนไลน์
  • บริการ
• เวิร์ดเพรส
  • ปลั๊กอิน
  • ธีม WP
• เกี่ยวกับเว็บไซต์
• ข่าว

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

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

• จุดที่ 1
• จุดที่ 2
• จุดที่ 3
• จุดที่ 4
  • ข้อ 1
  • อนุวรรค 2
  • ข้อย่อย 3
  • ข้อย่อยที่ 4

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

เราใช้ CSS เพื่อจัดรูปแบบรูปลักษณ์และการทำงานของเมนูของเรา สิ่งแรกที่คุณต้องทำคือสร้างไฟล์ CSS ตั้งชื่อไฟล์และบันทึกในรูปแบบเช่น: style.css

หมายเหตุ: ตรวจสอบให้แน่ใจว่าได้วางโค้ดต่อไปนี้ไว้ที่ส่วนหัวของเอกสาร HTML ระหว่างแท็ก ..... เพื่อเรียกไฟล์ CSS:

เมื่อคุณมีไฟล์ style.css แล้ว เราก็เริ่มเพิ่มสไตล์และทดลองใช้ตัวเลือกและฟีเจอร์ต่างๆ ได้เลย เพื่อความชัดเจนยิ่งขึ้น ฉันจึงเพิ่มความคิดเห็นในพารามิเตอร์โค้ด CSS บางตัว:

/*Base*/ * (ระยะขอบ: 0; ช่องว่างภายใน: 0;) body( ตระกูลแบบอักษร:Helvetica,Arial, sans-serif; ขนาดตัวอักษร:14px; พื้นหลัง: #474747 url(bg.png); ) #container ( width:960px; /*ความกว้างของคอนเทนเนอร์*/ ระยะขอบ: 10px auto; ) /*เมนู*/ .menu-nav ( ตำแหน่ง:ญาติ; ความกว้าง: 100%; /*ความกว้างของแถบเมนู*/ ความสูง:50px; ขนาดตัวอักษร :14px; color:#999; ระยะขอบ: 0 อัตโนมัติ; ขอบบนสุด: 20px; จาก(#647db5) ถึง(#395593)); ภาพพื้นหลัง: -o-linear-gradient(top,rgb(100, 125, 181) ), rgb(57, 85, 147)); 0 -1px 0 #111; เส้นขอบ: 1px ทึบ #444; /*มุมแถบเมนูโค้งมน*/ รัศมีเส้นขอบ: 8px; menu-nav ul ( list-style:none; color: #FFF; ) .menu-nav li ( float:left ; ตำแหน่ง:relative; .menu-nav ul li a ( border-right:1px solid #364f87;

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

ขอแสดงความนับถืออันเดรย์

เมนูการนำทางเป็นองค์ประกอบการออกแบบที่ค่อนข้างเรียบง่าย เราสร้างรายการแบบไม่เรียงลำดับ กำหนดสไตล์ออฟเซ็ตด้านซ้าย และกำหนดลักษณะที่ปรากฏ แต่การออกแบบแบบปรับเปลี่ยนได้ซึ่งกำลังได้รับความนิยม ได้ก่อให้เกิดข้อกำหนดใหม่สำหรับเมนู

ในบทช่วยสอนนี้ เราจะสร้างเมนูตอบสนองที่เรียบง่ายแต่มีประสิทธิภาพ ซึ่งปรับแต่งได้ง่ายมากเพื่อใช้ในทุกโปรเจ็กต์

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

• รูเซลเลอร์
• รายชื่อผู้ติดต่อ
• ลูกค้า
• ได้ผล
• เสียง
• ดาวน์โหลด
• บล็อก
• ติดต่อ

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

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

เมนูของเราจะมีลักษณะดังนี้หลังจากดำเนินการแล้ว:

เราจะเริ่มโค้ด CSS โดยใช้ตัวเลือกสากลเพื่อรีเซ็ตระยะขอบและช่องว่างภายใน และกำหนดคุณสมบัติ box-sizing: border-box ให้กับองค์ประกอบของหน้าทั้งหมด ขั้นตอนนี้จะช่วยให้เรากำหนดขนาดขององค์ประกอบเป็นเปอร์เซ็นต์ได้อย่างง่ายดาย แม้ว่าจะใช้เฟรมก็ตาม

* ( ช่องว่างภายใน: 0; ระยะขอบ: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; )

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

นอกจากนี้เราจะจัดรูปแบบรายการที่ไม่เรียงลำดับเพื่อหลีกเลี่ยงการใช้ป้ายกำกับ

ตอนนี้เรามาเริ่มกำหนดสไตล์สำหรับรายการเมนูกันดีกว่า

นำทาง ( display: block; float: left; width: 12.5%; padding: 10px; background: #444; border-right: 1px solid #fff; color: #fff; font: 700 13px/1.4 "PT Serif" , Helvetica, Verdana, Arial, sans-serif; ตกแต่งข้อความ: ไม่มี; การแปลงข้อความ: ตัวพิมพ์ใหญ่ ) /*SMALL TEXT*/ nav small ( color: #aaa; font: 100 11px/1 Helvetica, Verdana, Arial, sans -serif; การแปลงข้อความ: ไม่มี;

ขั้นแรก เรากำหนดแบบฟอร์มสำหรับแต่ละรายการ เราสร้างองค์ประกอบบล็อกลิงก์ทั้งหมด เลื่อนไปทางซ้าย กำหนดความกว้างและเยื้องเล็กน้อย เราได้สี่เหลี่ยมที่ค่อนข้างใหญ่ ความกว้าง 12.5% ​​ได้มาจากการคำนวณ 100% / 8 (จำนวนรายการเมนู)

จากนั้นเราจะกำหนดลักษณะที่ปรากฏ ตั้งค่าพื้นหลังและกรอบ