Home > Article > Web Front-end > How to do html horizontal navigation
How to do html horizontal navigation
- WBOYOriginal
- 2021-11-10 10:34:0038895browse
How to do HTML horizontal navigation: 1. Build a navigation menu (vertical) through the li tag in the ul tag; 2. Add the "list-style:none" style to the li tag to remove the little black in front of the navigation menu Click; 3. Add the "float: left;" style to the li tag to arrange the navigation bar horizontally.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
Idea: Create the
- tag, then create the
- tag inside the
- tag, and finally set the
- tag to float.
How to do html horizontal navigation:
1. Create a new html page, open the html editing software, and create a new html page. As shown in the picture:
##2. Add a navigation tag, create a new
- Add several
- tags to the tags. As shown in the picture:
3. Add text in the
- tag. Add the content to be displayed in the new
- . As shown in the figure:
4. Create a style tag, and create a new after the
tag. Label. <p></p> <p><img src="https://img.php.cn/upload/image/918/441/651/1636507772238439.png" title="1636507772238439.png" alt="How to do html horizontal navigation"></p>5. Create a horizontal navigation style, add a style class in the <style> tag: .nav li{}, and then set it in the .nav li class The style background color is red, the float is left float, the inner border is 8px from top to bottom and 15px from left to right, the list attribute is none, and the font color is white. <p>The style code is: <p><pre class="brush:css;toolbar:false;">.nav li{ background-color: red; padding: 8px 15px; float: left; list-style: none; color:#fff; }</pre> <p><img src="https://img.php.cn/upload/image/514/178/871/1636507796753077.png" title="1636507796753077.png" alt="How to do html horizontal navigation"/>6. Reference style class. Add class="nav" in the <ul> tag, so that the <li> tag under nav can refer to the set style class. As shown in the picture: <p><p><img src="https://img.php.cn/upload/image/157/949/421/1636507843494356.png" title="1636507843494356.png" alt="How to do html horizontal navigation"/>7. Check the effect. After saving the html file, open it with a browser to see the horizontal navigation menu effect. As shown in the picture: <p><p><img src="https://img.php.cn/upload/image/741/472/608/1636507853324262.png" title="1636507853324262.png" alt="How to do html horizontal navigation"/>All codes: <p><pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>横向导航菜单</title> <style type="text/css"> .nav li{ background-color: red; padding: 8px 15px; float: left; list-style: none; color:#fff; } </style> </head> <body> <ul class="nav"> <li>首页</li> <li>新闻</li> <li>公司产品</li> <li>关于我们</li> <li>公司介绍</li> </ul> </body> </html></pre>For more programming-related knowledge, please visit: <p>Programming Video<a href="https://www.php.cn/course.html" target="_blank" textvalue="编程视频">! ! </style>
- tags to the tags. As shown in the picture:
- tag to float.
The above is the detailed content of How to do html horizontal navigation. For more information, please follow other related articles on the PHP Chinese website!