新手入门、HTML制作简易导航条方法，解释每行代码意思，小白入门也能懂！实现html导航栏的多种方法

制作简易的导航栏

首先我们写好一个简单的HTML代码，用来摸你网站头部部分，你肯定能看懂

<!-- 先来做一个大的容器 -->
		<div class="nav_box">
		<!-- 这里是logo位置 -->
			<div class="logo">
				<a href="#">我是logo</a>
			</div>
			<!-- 这里是导航nav位置，用 ul li 来实现导航栏-->
			<div class="nav">
				<ul>
					<li><a href="#">一</a></li>
					<li><a href="#">二</a></li>
					<li><a href="#">三</a></li>
					<li><a href="#">四</a></li>
				</ul>
			</div>
		</div>
		<!-- 这里2级标题，它的特点就是行元素，独占一行 -->
		<h2>看看我的状态是怎样的情况吗，我是h2，我用来演示网页主体部分</h2>

先看看效果吧

现在我们给 html 穿上衣服，让它更漂亮

全局设置：

*{
	margin: 0px;
	padding: 0px;
	/*这里给全局设置，去除所有元素标签的内外边距*/
}

最大的头部盒子设置：

.nav_box{
			border: 2px solid plum;
			/*这里给最大的div（容器），加上紫色的边框、宽度为2像素，边框是实线*/
		}

头部logo盒子设置：

.logo{
		width: 100px;
		/*加上宽度100像素*/
		height: 50px;
		/*加上高度50像素*/
		line-height: 50px;
		/*加上行高50像素，这个 行高=高度时 可以使里面的字垂直居中*/
		background-color: red;
		/*背景设置成红色，方便观察*/
		float: left;
		/*给logo盒子，加上做一个左浮动，*/
	}

头部导航nav设置：

/*选择 .nav 下面的 ul 下面的 li*/
.nav ul li{
			list-style: none;
			/*去除 li的*/
			
			float: left;
			/*这里给li做的左浮动，可以让li横排显示*/
			width: 100px;
			height: 50px;
			line-height: 50px;
			/*设置宽、高、行高*/
			background-color:orange;
			/*背景橘色*/
			border: 1px solid black;
			/*加一个1像素的黑色实线边框*/
			text-align: center;
			/*让里面的字。水平居中*/
	}

我们看一下穿上衣服的效果

这里会有一个问题，我把浏览器框拉小，再看看：（左边我用红色边框，框起来了）

看到导航栏被挤压掉下来了，下面的h2标题也是一样，一行已经不够显示了，就掉下来了

那么怎么解决问题呢？

导航栏被挤压、掉下来的问题解决办法

我们可以想：既然是会换行，那么就是没有空间来显示这个行元素的空间

那么我们给他足够的宽度试一下！

.nav{
		width: 500px;
		/*给包裹导航栏的div 一个宽度500像素，这个宽度要 > = 所有li加起来的宽度，边框也要算哦！*/
	}

再来看看效果:

还是不行？那怎么办？我们给 .nav 加一个边框看看

.nav{
		width: 500px;
		border: 3px solid aqua;
		/*边框加粗一点，看的更清楚*/
	}

这里显示的是只有400px，因为我们没有给 .nav 做左浮动。所以前面logo的下面也有100px属于 .nav

然后剩下来的400px，就不够 li 加上 li 的边框显示了，就会换行了

解决办法就是宽度再增加、或者给 .nav 也做一个左浮动

.nav{
		width: 510px;
		/*宽度再加10px*/
		border: 3px solid aqua;
	}

效果就成了这样了

下面的 h2 是没有加宽度的，所以被压缩了。我们再把浏览器拉小一点看看 .nav 的变化

给 .nav 设置宽度后，现在已经不会被挤压掉下来了。但是 h2 还是会被挤压掉下来

我们也给 h2 一个宽度看看效果

h2{
		width: 750px;
}

看看效果：

也是没有被挤压掉下来了

我们可以看到，一个固定的宽度属性，对于行元素是非常重要的。
注意这个小问题，就不会让自己写了大页面以后发现这个问题很头痛，其实也是一个很简单的问题

实现导航栏的多种方式

• 可以使用 float: left;（浮动，要注意父元素塌陷的问题，还有清除浮动）
• 可以使用 display: inline-block;（行内块级，这个让块之间产生一个间隔，这个间隔很头疼）
• 可以使用 display: flex;（弹性布局，非常灵活。需要理解透就非常好用，不然就很难控制它）
• 还可以使用table （这个我不怎么用…就不说了，大家可以尝试）

至于display:inline-block 的留白间隙问题，大家可以看看这篇文章！
里面说了怎么解决display: inline-block;行内块级的间隔问题

https://blog.csdn.net/qq_32614411/article/details/82223624

刚入门的小白写的，有错误的地方希望大佬能指点小生，感激不尽，欢迎讨论问题

做技术一定要一颗恒心，这样才不会半途而废。