How to use HTML to create a simple and beautiful navigation bar (detailed code explanation)

In the previous article "css Tips: How to Add a Mask to an Image (Share)", I introduced you how to use a CSS image to add a mask. The following article will introduce to you how to create a simple and beautiful navigation bar in HTML. Let’s see how to do it together. Friends in need can refer to it. I hope it will be helpful to you.

#I started reading it a few months ago after learning the basics a while ago (and quickly forgetting them). I've started making my own web pages to test and improve my skills, but I'm having trouble getting the navigation bar to display correctly.

The HTML of my navigation bar

The code is as follows:

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

The code runs with the original picture:

The effect of HTML with navigation skeleton is attached with a code example

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

The code is run with a rendering:

While writing I'm an absolute beginner when it comes to HTML coding, so I apologize if I didn't do a good job.

Recommended learning: Html video tutorial

The above is the detailed content of How to use HTML to create a simple and beautiful navigation bar (detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!