สิ่งสำคัญที่สุดประการหนึ่งในการพัฒนาซอฟต์แวร์และเว็บไซต์คือการสร้างเมนู Microsoft และผลิตผลที่โด่งดังที่สุดคือระบบปฏิบัติการ Windows ควรเป็นตัวอย่างที่สำคัญ แม้ว่าข้อเท็จจริงที่ว่าผู้ใช้พีซีส่วนใหญ่ใช้ผลิตภัณฑ์นี้ในโลกอย่างท่วมท้น การวิจารณ์ไม่เพียงไม่ลดลงเท่านั้น แต่ยังเพิ่มขึ้นอย่างต่อเนื่อง โดยทั่วไปจะเกี่ยวข้องกับความไม่สะดวกของตำแหน่งของรายการเมนู ต่อไปนี้เป็นคำอธิบายเกี่ยวกับวิธีการสร้างเมนูใน CSS และ Expression Web
คำแนะนำ
ขั้นตอนที่ 1
หากต้องการเริ่มสร้างเมนูแนวนอน ให้ไปที่จัดการสไตล์ จากนั้นคลิกปุ่มรูปแบบใหม่ ตั้งชื่อ Selector สไตล์ใหม่ ul li สำคัญ! ตรวจสอบให้แน่ใจว่าไฟล์ที่สร้างขึ้นมีนามสกุล drop-down.css ในการสร้างเมนูแนวนอน ให้ระบุองค์ประกอบที่สร้างขึ้นว่าจะเป็นแนวนอนพอดี ถัดไป กำหนดความกว้างของแต่ละรายการในเมนูและลบจุดที่ไม่จำเป็นทั้งหมดที่อยู่ด้านหน้ารายการทั้งหมดในรายการ
ขั้นตอนที่ 2
ไปที่ตัวเลือก Layout ตั้งค่าแอตทริบิวต์ Display เป็น Inline เพื่อจัดตำแหน่งแนวนอน ถัดไป ตั้งค่า Left เป็นแอตทริบิวต์ Float และคลิกปุ่ม Apply ตั้งค่ารายการทั้งหมดเป็นบรรทัดเดียว เพื่อจัดวางให้เรียบร้อยและไม่คลานทับกัน ในแอตทริบิวต์ Width ให้ตั้งค่า Position เป็น 150 px ตรวจสอบว่าองค์ประกอบทั้งหมดในรายการมีขนาดเท่ากัน ถัดไป ให้ลบจุดที่อยู่ด้านหน้าองค์ประกอบทั้งหมด - สำหรับสิ่งนี้ ไปที่แอตทริบิวต์ List และตั้งค่าพารามิเตอร์ None ในรายการประเภท List Style คลิกตกลงเพื่อให้การเปลี่ยนแปลงทั้งหมดได้รับการยอมรับและนำไปใช้
ขั้นตอนที่ 3
ปรับขนาดและรูปแบบตัวอักษรสำหรับ ul li ในการดำเนินการนี้ ให้ไปที่จัดการสไตล์และคลิกขวาที่ ul li จากนั้นเลือก Modify Style กล่องโต้ตอบที่คุ้นเคยจะปรากฏขึ้น ไปที่ Font เลือกแอตทริบิวต์ Font-family และตั้งค่าเป็น Sans-serif, Arial, Helvetica ถัดไป ปรับขนาดแบบอักษรโดยตั้งค่าเป็น 0, 9 หลังจากนั้น ตั้งค่าแอตทริบิวต์ Text-transform เป็นตัวพิมพ์ใหญ่ ปรับความสูงของรายการเมนูในแอตทริบิวต์ ความสูง - ตำแหน่ง โดยตั้งค่าเป็น 30 px
ขั้นตอนที่ 4
หลังจากดำเนินการแก้ไขเสร็จแล้ว ให้บันทึกไฟล์เป็น menu.html ถัดไป ทดสอบเมนูที่สร้างขึ้นในเบราว์เซอร์ต่างๆ เพื่อให้แน่ใจว่าทำงานได้อย่างถูกต้อง อย่างที่คุณเห็น การออกแบบเมนูแนวนอนค่อนข้างง่าย