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 tag in the tag, and then add a 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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false;">.nav li{
background-color: red;
padding: 8px 15px;
float: left;
list-style: none;
color:#fff;
}</pre><div class="contentsignin">Copy after login</div></div></p> <p><img src="https://img.php.cn/upload/image/514/178/871/1636507796753077.png" title="1636507796753077.png" alt="How to do html horizontal navigation"/></p>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><p><img src="https://img.php.cn/upload/image/157/949/421/1636507843494356.png" title="1636507843494356.png" alt="How to do html horizontal navigation"/></p>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><p><img src="https://img.php.cn/upload/image/741/472/608/1636507853324262.png" title="1636507853324262.png" alt="How to do html horizontal navigation"/></p>All codes: <p><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div>For more programming-related knowledge, please visit: <p>Programming Video<a href="https://www.php.cn/course.html" target="_blank" textvalue="编程视频">! ! </style>
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
