CSS之一级横状导航栏

最新推荐文章于 2024-07-18 17:34:14 发布

398T.

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量189

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/qq_45309448/article/details/129460449

版权

直接上全部代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		div {
			display: flex;
			justify-content: center;
			background-color: rgba(0, 0, 0, 0.3);
			height: 50px;
			width: 100%;
		}

		li {
			display: inline-block;
			padding: 10px 110px;
			font-size: 25px;
		}
	</style>
</head>

<body>
	<div>
		<nav>
			<UL>
				<li><a href="#">LOGO</a></li>
				<li><a href="#">发展项目</a></li>
				<li><a href="#">公司前景</a></li>
			</UL>
		</nav>
	</div>
</body>

</html>

CSS部分

第一步先设置，内外边距的统一，还有box-sizing：border-box统一所以元素大小加起来不小于总的height 和 width。
		div {
			display: flex;  设置弹性布局
			justify-content: center;  居中，与上一行代码同时发挥作用
			background-color: rgba(0, 0, 0, 0.3);
			height: 50px;
			width: 100%;
		}
第三步是将菜单盒子居中
		li {
			display: inline-block;横状导航栏的关键
			padding: 10px 110px;隔开每个菜单的距离的
			font-size: 25px;
		}
第四步的时候，代码还是竖状菜单，这个时候就要使用display：inline-block行内块元素，将竖状变成横状。但是这个时候虽然横起来了，但是都贴在一起了
第四步的话，将已经横状的菜单分开来，使用，内边距padding隔开各个菜单的距离。