Cara menggunakan HTML untuk mencipta bar navigasi yang ringkas dan cantik (penjelasan kod terperinci)

Dalam artikel sebelumnya "Petua CSS: Cara menambah topeng pada imej (kongsi) ", saya memperkenalkan anda cara menggunakan CSS untuk menambah topeng pada imej. Artikel berikut akan memperkenalkan kepada anda cara membuat bar navigasi yang mudah dan cantik dalam HTML Mari kita lihat cara melakukannya bersama-sama Rakan yang memerlukan saya harap ia akan membantu anda.

Saya mula membacanya beberapa bulan lalu selepas mempelajari asasnya sebentar tadi (dan cepat melupakannya). Saya telah mula membuat halaman web saya sendiri untuk menguji dan meningkatkan kemahiran saya, tetapi saya menghadapi masalah mendapatkan bar navigasi untuk dipaparkan dengan betul.

HTML bar navigasi saya

kod adalah seperti berikut:

<div class="nav">
    <ul class="nav">
        <li class="nav"><a class="nav" href="#">Home</a></li>
        <li class="nav"><a class="nav" href="#">Coffee</a></li>
        <li class="nav"><a class="nav" href="#">Food</a></li>
        <li class="nav"><a class="nav" href="#">Catering</a></li>
        <li class="nav"><a class="nav" href="#">About</a></li>
        <li class="nav"><a class="nav" href="#">Contact</a></li>
    </ul>
</div>
<!--Navigation bar.-->

Gambar asal dilampirkan semasa kod dijalankan:

Kesan HTML dengan rangka navigasi dilampirkan dengan contoh kod

<nav>
    <ul class="navbar">
        <li class="nav-item selected"><a href="#">Home</a></li>
        <li class="nav-item"><a href="#">Coffee</a></li>
        <li class="nav-item"><a href="#">Food</a></li>
        <li class="nav-item"><a href="#">Catering</a></li>
        <li class="nav-item"><a href="#">About</a></li>
        <li class="nav-item"><a href="#">Contact</a></li>
    </ul>
</nav>

<style>
nav{
   position:fixed;
}

.nav-item{
   color: #000;
   border: 1px solid blue;
   background-color: rgba(255, 255, 255, .6 ) 
}

.nav-item:hover
{
        background-color: rgba(0, 255, 255, .6 ) 
}

.selected{
   color: #058;
   border: 1px solid red;
   background-color: rgba(255, 0, 255, .6 ) 
}

Kod berjalan dilampirkan dengan pemaparan:

Saya seorang pemula mutlak dalam hal menulis kod HTML, jadi saya memohon maaf jika saya tidak melakukan kerja dengan baik.

Pembelajaran yang disyorkan: Tutorial video html

Atas ialah kandungan terperinci Cara menggunakan HTML untuk mencipta bar navigasi yang ringkas dan cantik (penjelasan kod terperinci). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!