Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to make navigation bar with css". The editor shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "how to use css to make navigation bar" can help you solve the problem.

1. First of all, it is the same as before, we create a new html file in the development app and name it as our favorite name (preferably in English because it can be convenient in the later work to avoid unnecessary trouble), so let's take a look at the code part! The code is as follows:

How to use css to make Navigation Bar

Css makes navigation bar

Live broadcast on the home page for more

two。 In the code block above, we can see that we have used the three tags ul li a, so then we add the href= "" attribute and class attribute to the a tag, which makes it easy for us to jump in the click navigation bar and continue to add the link tag in preparation for connecting to css. The code is as follows:

How to use css to make Navigation Bar

Css makes navigation bar

Live broadcast on the home page for more

3. After we have finished, we create a new css file and add list-style-type: none; to the ul in the css file to remove the default point in front of the navigation. After setting the settings, we will change the color of the navigation bar after the mouse is set. The code is as follows:

Ul {list-style-type: none;/* removes black dots from li * / margin: 0; width: 200px; background-color: antiquewhite;/* sets the background of the entire navigation bar * /} li a {display: block; color: peru; padding: 8px 16px; text-decoration: none } li a.active {background-color: palegreen/* set the background color of the first navigation bar * /} li a:hover:not (.active) {/ * set the home page will not change color as the mouse moves * / background-color: gray; color: white;}

4. In the code block, the editor makes comments for you. If you don't understand, you can learn it in the CSS tutorial. After completing the above steps, we can get a screenshot of the vertical navigation bar as follows:

5. Of course, in the normal use, we see more horizontal navigation bar, if you want to change to the horizontal navigation bar, you only need to add overflow:hidden; to the ul in CSS to remove the width:200px;, and add a li float to the left float. The code and screenshot are as follows:

Ul {list-style-type: none;/* removes black dots from li * / margin: 0; overflow: hidden; background-color: antiquewhite;/* sets the background of the entire navigation bar * /} li {float: left;/* sets the left float to make the text move closer to the right * /} li a {display: block; color: peru; padding: 8px 16px Text-decoration: none;} li a.active {background-color: palegreen/* set the background color of the first navigation bar * / li a:hover:not (.active) {/ * setting the home page will not change color with the movement of the mouse * / background-color: gray; color: white;} this is the end of the content on "how to make a navigation bar with css". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.