So erstellen Sie mit HTML eine einfache und schöne Navigationsleiste (detaillierte Code-Erklärung)

Im vorherigen Artikel „CSS-Tipps: So fügen Sie Masken zu Bildern hinzu (Teilen)“ habe ich Ihnen gezeigt, wie Sie CSS zum Hinzufügen von Masken zu Bildern verwenden. Im folgenden Artikel erfahren Sie, wie Sie eine einfache und schöne Navigationsleiste in HTML erstellen. Ich hoffe, dass er Ihnen weiterhilft.

Ich habe vor ein paar Monaten angefangen, es zu lesen, nachdem ich die Grundlagen schon vor einiger Zeit gelernt hatte (und sie schnell vergessen hatte). Ich habe damit begonnen, meine eigenen Webseiten zu erstellen, um meine Fähigkeiten zu testen und zu verbessern, aber es fällt mir schwer, die Navigationsleiste richtig anzuzeigen.

Der HTML-

Code meiner Navigationsleiste lautet wie folgt:

<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.-->

Das beim Ausführen des Codes angehängte Originalbild:

Der HTML-Effekt mit angehängtem Navigationsskelett ist das Codebeispiel

<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 ) 
}

Das angehängte Effektbild, wenn der Code ausgeführt wird:

Ich bin ein absoluter Anfänger, wenn es um das Schreiben von HTML-Code geht, daher entschuldige ich mich, wenn ich keine gute Arbeit geleistet habe.

Empfohlenes Lernen: Html-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit HTML eine einfache und schöne Navigationsleiste (detaillierte Code-Erklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!