บทช่วยสอน แถบนำทาง CSS ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้
ตัวอย่าง: ป้าย,ป้าย,Navigation Links รายการ =,ตัวอย่าง,ตัวอย่าง,แถบนำทางแนวตั้ง,ตัวอย่าง,แถบแนวนอน,รายการอินไลน์,ตัวอย่าง,ลอยในรายการ,ตัวอย่าง,
แถบนำทาง CSS
ป้าย
ลูกศรใช้ฝีมือสำหรับเว็บไซต์ใด ๆ เป็นสิ่งสำคัญมาก
ด้วย CSS คุณสามารถแปลงเป็นแถบนำทางที่ดีแทนเมนู HTML น่าเบื่อ
Navigation Links รายการ =
ในฐานะที่เป็นแถบนำทาง HTML มาตรฐานตามเป็นต้อง
. ในตัวอย่างของเราเราจะสร้างมาตรฐาน HTML แถบนำทางรายการ
แถบนำทางเป็นพื้นรายการของการเชื่อมโยงเพื่อใช้ <ul> และ <li> องค์ประกอบมีความหมายมาก
ตัวอย่าง
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
ตอนนี้ขอเอาอัตรากำไรขั้นต้นและขยายจากรายการ
ตัวอย่าง
ul
{
list-style-type:none;
margin:0;
padding:0;
}
ลอง» ตัวอย่างของการวิเคราะห์:
- รูปแบบรายการ-Type: ไม่มี - ก่อนที่จะถอดรายการของธงขนาดเล็ก แถบนำทางไม่จำเป็นต้องมีเครื่องหมายรายการ
- ลบตั้งค่าเริ่มต้นและอัตรากำไรขั้นต้นขยายชุดเบราว์เซอร์ให้เป็น 0
รหัสตัวอย่างข้างต้นอยู่ในมาตรฐานแนวตั้งและแนวนอนแถบนำทางใช้รหัส
แถบนำทางแนวตั้ง
รหัสข้างต้นเราจะต้ององค์ประกอบสไตล์ <a> สร้างแถบนำทางแนวตั้ง:
ตัวอย่าง
a
{
display:block;
width:60px;
}
ลอง» ตัวอย่างแสดงให้เห็นว่า:
- จอแสดงผล: บล็อก - จอแสดงผลเชื่อมโยงบล็อกองค์ประกอบเพื่อให้ครบถ้วนจะกลายเป็นพื้นที่เชื่อมโยงคลิกได้ (ไม่เพียง แต่ข้อความ) ซึ่งจะช่วยให้เราสามารถระบุความกว้าง
- ความกว้าง: 60px - องค์ประกอบของบล็อกโดยเริ่มต้นคือความกว้างสูงสุด เราต้องการที่จะระบุความกว้างของ 60 พิกเซล
เคล็ดลับ: ดู ตัวอย่างของการเต็มรูปแบบแถบนำทางแนวตั้ง
หมายเหตุ: โปรดระบุความกว้างขององค์ประกอบในแถบนำทางแนวตั้ง <a> 'sถ้าคุณไม่ใช้ความกว้าง IE6 สามารถให้ผลลัพธ์ที่ไม่คาดคิด
แถบแนวนอน
มีสองวิธีที่จะสร้างแถบนำทางแนวนอนใช้รายการแบบอินไลน์หรือลอย
ทั้งสองวิธีจะมีการปรับ แต่ถ้าคุณต้องการที่จะเชื่อมโยงไปยังขนาดเดียวกันที่คุณจะต้องใช้วิธีการลอยตัว
รายการอินไลน์
หนึ่งที่จะสร้างแถบแนวนอนคือการระบุ
องค์ประกอบรหัสข้างต้นเป็นมาตรฐานในตัว: ตัวอย่าง
li
{
display:inline;
}
ลอง» ตัวอย่างการวิเคราะห์:
- จอแสดงผล: อินไลน์ - โดยค่าเริ่มต้น <li> องค์ประกอบเป็นองค์ประกอบบล็อก ที่นี่เราเอาเส้นแบ่งก่อนและหลังรายการแต่ละรายการเพื่อแสดงเส้น
เคล็ดลับ: ดู ตัวอย่างของการเต็มรูปแบบแถบแนวนอน
ลอยในรายการ
ในการเชื่อมโยงตัวอย่างข้างต้นมีความกว้างที่แตกต่างกัน
สำหรับการเชื่อมโยงทั้งหมดของความกว้างเท่ากันลอย <li> องค์ประกอบและระบุความกว้างของ <a> องค์ประกอบ:
ตัวอย่าง
li
{
float:left;
}
a
{
display:block;
width:60px;
}
ลอง» ตัวอย่างการวิเคราะห์:
- ลอย: ซ้าย - ใช้ภาพนิ่งองค์ประกอบเลื่อนไปกัน
- จอแสดงผล: บล็อก - จอแสดงผลเชื่อมโยงบล็อกองค์ประกอบเพื่อให้ครบถ้วนจะกลายเป็นพื้นที่เชื่อมโยงคลิกได้ (ไม่เพียง แต่ข้อความ) ซึ่งจะช่วยให้เราสามารถระบุความกว้าง
- ความกว้าง: 60px - องค์ประกอบของบล็อกโดยเริ่มต้นคือความกว้างสูงสุด เราต้องการที่จะระบุความกว้างของ 60 พิกเซล
เคล็ดลับ: ดู ตัวอย่างของการเต็มรูปแบบแถบแนวนอน.