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

This article mainly explains "how to do html horizontal navigation". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to do html horizontal navigation".

Do html horizontal navigation: 1, through the ul tag li tag to build the navigation menu (vertical); 2, add the "list-style:none" style to the li tag to remove the small black spots in front of the navigation menu; 3, add the "float: left;" style to the li tag to allow the navigation bar to be arranged horizontally.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Idea: create a tag, then create a tag inside the tag, and finally set the tag to float.

The way to navigate horizontally by html:

1. Create a new html page, open the html editing software, and create a new html page. As shown in the figure:

2. Add a navigation tag, create a new tag in the tag, and then add several tags to the tag. As shown in the figure:

3. Add text to the label. Add the content to be displayed in the new one. As shown in the figure:

4. Create a style label and create a new label after the label.

5, create a horizontal navigation style, add a style class to the label: .nav li {}, and then set the style background color to red, float to the left floating in the .nav li class, 15px around the top and bottom of the inner border for 8px, none for the list attribute, and white font color.

The style code is:

.nav li {background-color: red; padding: 8px 15px; float: left; list-style: none; color:#fff;}

6. Reference style class. By adding class= "nav" to the tag, you can have the tag under nav refer to the set style class. As shown in the figure:

7. Check the effect. After saving the html file, open it with a browser to see the effect of the horizontal navigation menu. As shown in the figure:

All codes:

Horizontal navigation menu .nav li {background-color: red; padding: 8px 15px; float: left; list-style: none; color:#fff } Home News Company products about our company introduction thank you for reading, the above is "how to do html horizontal navigation" content, after the study of this article, I believe you have a deeper understanding of how to do html horizontal navigation, the specific use of the situation also needs to be verified by practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.