How to use HTML to create a simple and beautiful navigation bar (detailed code explanation)-HTML Tutorial-php.cn

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

奋力向前

Release： 2021-07-28 22:01:23

Original

14739 people have browsed it

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.

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

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

Copy after login

The code runs with the original picture:

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

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

Copy after login

The code is run with a rendering:

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

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!