css导航栏

最新推荐文章于 2024-01-08 17:09:49 发布

qq_59739040

最新推荐文章于 2024-01-08 17:09:49 发布

阅读量145

点赞数

分类专栏： div+css 文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_59739040/article/details/126916319

版权

div+css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

用css写的一个简易导航栏

鼠标经过会有一个把导航铺满的小动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航</title>
		<style>
			*{
				margin: 0;
				padding: 0;
				border: 0;
			}
			body{
				background-color: #000;
			}
			li{
				list-style:none;
			}
			a{
				text-decoration: none;
			}
			.nav{
				width: 63%;
				height: 50px;
				margin:50px auto;
				background-color:black;
			}
			.nav{
				overflow: hidden;
			}
			.nav ul li {
				float: left;
				line-height: 50px;
				text-align: center;
				width: 12%;
				height: 50px;
				position: relative;
				background-color: greenyellow;
				border-radius: 10px;
			}
			.nav ul li a{
				position: relative;
				z-index: 2;
				color: black;
			}
			.nav ul li::before{
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				background-color: yellow;
				width: 0%;
				z-index: -1;
				height: 50px;
				transition: 0.2s all linear;
				border-radius: 10px;
			}
			.nav ul li:hover::before{
				width: 100%;
				z-index: 1;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<ul>
				<li><a href="#">一</a></li>
				<li><a href="#">二</a></li>
				<li><a href="#">三</a></li>
				<li><a href="#">四</a></li>
				<li><a href="#">五</a></li>
				<li><a href="#">六</a></li>
				<li><a href="#">七</a></li>
				<li><a href="#">八</a></li>
			</ul>
		</div>
	</body>
</html>

上面的写完后想着写一个带滑块的导航栏，写完发现有点小问题各路大神指点一下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航</title>
		<style>
			*{
				margin: 0;
				padding: 0;
				border: 0;
			}
			body{
				background-color: #000;
			}
			li{
				list-style:none;
			}
			a{
				text-decoration: none;
			}
			.nav{
				width: 63%;
				height: 50px;
				margin:50px auto;
				background-color:black;
			}
			.nav{
				overflow: hidden;
			}
			.nav{
				position: relative;
			}
			.nav ul li {
				float: left;
				line-height: 50px;
				text-align: center;
				width: 12%;
				height: 50px;
				background-color: greenyellow;
				border-radius: 10px;
			}
			.nav ul li a{
				position: relative;
				z-index: 2;
				color: black;
			}
			.nav ul li::before{
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				background-color: yellow;
				width: 12%;
				z-index: -1;
				height: 50px;
				transition: 0.2s all linear ;
				border-radius: 10px;
			}
			.nav ul li:hover::before{
				z-index: 1;
			}
			.nav ul li:nth-child(2):hover::before{
				left:12%;
				
			}
			.nav ul li:nth-child(3):hover::before{
				left:24%;
				
			}
			.nav ul li:nth-child(4):hover::before{
				
				left:36%;
				
			}
			.nav ul li:nth-child(5):hover::before{
				left:48%;
				
				
			}
			.nav ul li:nth-child(6):hover::before{
				
				left:60%;
				
			}
			.nav ul li:nth-child(7):hover::before{
				
				left:72%;
				
			}
			.nav ul li:nth-child(8):hover::before{
				left:84%;
				
			}
			
		</style>
	</head>
	<body>
		<div class="nav">
			<ul>
				<li><a href="#">一</a></li>
				<li><a href="#">二</a></li>
				<li><a href="#">三</a></li>
				<li><a href="#">四</a></li>
				<li><a href="#">五</a></li>
				<li><a href="#">六</a></li>
				<li><a href="#">七</a></li>
				<li><a href="#">八</a></li>
			</ul>
		</div>
	</body>
</html>