สร้างเมนูแนวนอนสำหรับเว็บไซต์ของตัวเอง

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

เรียนรู้ที่จะทำให้เมนู

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

HTML รหัสลักษณะเช่นนี้:

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

Ul - บล็อกองค์ประกอบของรายการก็จะมีการขยายให้กว้าง หลี่ยังเป็นบล็อก

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

CSS คืออะไร?

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

ใช้ผ้าสไตล์สำหรับการพัฒนาเมนู

CSS-สำหรับเมนู:

1. # My_1menu {รูปแบบรายการ: none; padding: 6; ความกว้าง: 800px; margin: อัตโนมัติ;}
2. # My_1menu li {ลอย: ด้านซ้าย; ตัวอักษร: Arial 18px italic;}
3. # My_1menu ก {color: # 756; จอแสดงผล: บล็อก; ความสูง: 55 พิกเซล; line-height: 55 พิกเซล; padding: 0px 15px 15px 0px; พื้นหลัง: #dfc; ตกแต่งข้อความ: none;}
4. # My_1menu A: โฉบ {สี: #foa; พื้นหลัง: # 788;}

ตอนนี้ให้ดูที่ส่งผลให้เมนู CSS แนวนอน

# My_1menu - เพื่อให้มีการกำหนดรูปแบบองค์ประกอบ UL- กับ id = my_1menu, รูปแบบรายการ: ไม่มี - คำสั่งนี้เพื่อลบเครื่องหมายซ้ายโดยรายการที่กำหนด

ความกว้าง: 800px - ความกว้างของเมนูของเราคือ 800 พิกเซล

padding: 0 - นี้เอาช่องว่างภายใน

margin: รถยนต์ - vyravnivnie เมนูแนวนอนที่ตรงกลางของหน้าของเรา

# My_1menu li - การกำหนดรูปแบบ Li-องค์ประกอบ

ความสูง: 55 พิกเซล - ความสูงเมนู

# My_1menu: การเลื่อน - การกำหนดรูปแบบเพื่อให้องค์ประกอบและเมาส์เมื่อมันถูกเหนี่ยวนำให้เกิด

เราจะไม่อธิบายรายละเอียดทุกบรรทัดทุกพัฒนาสามารถระบุพารามิเตอร์ของที่นี่ พื้นฐานสำหรับการใช้งานของรูปแบบในเมนูบนเว็บไซต์นี้ คุณสามารถให้มันมีลักษณะสำเร็จรูปมากขึ้นและสวยงามโดยใช้ภาพ กำหนดองค์ประกอบ แต่สำหรับตัวอย่างเช่นพื้นหลัง:: url (img1.png) ทำซ้ำ-X ให้มีพื้นหลัง:: url (img2.png) ทำซ้ำ-X สำหรับ: วางเมาส์

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