Rumah  >  Artikel  >  hujung hadapan web  >  Cara menggunakan HTML untuk mencipta bar navigasi yang ringkas dan cantik (penjelasan kod terperinci)

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

奋力向前
奋力向前asal
2021-07-28 16:46:3514682semak imbas

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.

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

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:

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

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:

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

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn