วิธีสร้างแถบนำทางเว็บไซต์ที่โปร่งใส

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

1

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

ระหว่างแท็กเปิดและปิดคุณสามารถวางลิงก์การนำทางได้

2

รวมองค์ประกอบจุดยึดสำหรับแต่ละลิงก์การนำทางที่คุณต้องการ ภายในองค์ประกอบ "nav" ให้เพิ่มองค์ประกอบจุดยึดสำหรับแต่ละลิงก์ที่คุณต้องการให้ผู้ใช้เรียกดูได้ ต่อไปนี้เป็นองค์ประกอบจุดยึดตัวอย่างที่ลิงก์ไปยังส่วนไซต์:

เกี่ยวกับ

ลิงก์นี้เชื่อมโยงไปยังส่วนภายในไซต์ที่อยู่ในโฟลเดอร์ชื่อ "about" ซึ่งอยู่ในไดเร็กทอรีเดียวกันกับเพจที่โค้ดนี้ปรากฏหากต้องการลิงก์ไปยังเพจแทนที่จะเป็นโฟลเดอร์มาร์กอัปควรปรากฏดังนี้สำหรับ HTML :

เกี่ยวกับ

3

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

ภายในนี้คุณสามารถเพิ่มการประกาศเพื่อจัดรูปแบบองค์ประกอบในเพจของคุณได้

4

จัดรูปแบบจุดยึด ในส่วน CSS ของหน้าของคุณให้เพิ่มการประกาศเพื่อจัดรูปแบบจุดยึดในแถบนำทางของคุณ ตัวอย่างเช่นหากต้องการจัดรูปแบบองค์ประกอบจุดยึดทั้งหมดภายในด้วย "nav" เป็นแอตทริบิวต์ ID คุณสามารถใช้ตัวเลือกต่อไปนี้:

/ การประกาศสไตล์ /

}

สิ่งนี้บ่งชี้จุดยึดในทุกสถานะ ในส่วนนี้คุณสามารถเพิ่มการประกาศรูปแบบใดก็ได้ที่คุณต้องการบังคับใช้เช่น:

ตกแต่งข้อความ: ไม่มี; ความกว้าง: 100px; แสดง: บล็อก; ลอย: ซ้าย;

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

ความกว้าง: 800px; }

5

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

เนื้อความ {background-image: url ("bgpic.jpg"); }

เว้นแต่คุณจะระบุภาพพื้นหลังหรือสีสำหรับแถบนำทางก็ควรแสดงด้วยพื้นหลังโปร่งใส