导航栏练习2【底部为背景边框的突出效果】

最新推荐文章于 2022-04-29 23:51:53 发布

blink555

最新推荐文章于 2022-04-29 23:51:53 发布

阅读量100

点赞数

本文链接：https://blog.csdn.net/weixin_44325613/article/details/115536206

版权

简单案例：
在这里插入图片描述

		<style>
			*{margin: 0; padding: 0;}
			.nav{
				height: 50px;
				background: #f00;
			}
			
			.nav ul li{
				float: left;
				list-style: none;
			}
			.nav ul li a{
				color: #fff;
				text-decoration: none;
				padding: 0 20px;
				line-height: 50px;
				background: #ff0;
				display: block;
				height: 40px;
				margin-top: 10px;
			}
			.nav ul li a:hover{
				background: #f0f;
				height: 50px;
				margin-top: 0;
			}
			
		</style>
	</head>
	<body>
		<div class="nav">
			<ul>
				<li>
					<a href="#">首页</a>
				</li>
				<li>
					<a href="#">首页</a>
				</li>
				<li>
					<a href="#">首页</a>
				</li>
			</ul>
		</div>

思路

top高度为50px，未hover时a的高度行高为40，但是高度为50，margin-top:10px，使其上面空出
houver时a的高度变为50px和top栏高度一样【记得把margint-top取消，否则a高度和top栏一样高时，还是有margin-top会溢出】

方式二

未hover时，a的高度为40px，不设置margin-top，而是设置一个白色背景的边框，此时总的高度为(40px+10px边框)。
hover时，a的高度为50px,边框取消，border:none

	.nav1{
				height: 50px;
				background: #000;
			}
			.nav1 ul li{
				float: left;
				list-style: none;
			}
			.nav1 ul li a{
				display: block;
				height: 40px;
				border-top: 10px solid #fff;				
				background: #0ff;
				padding: 0 20px;
				line-height: 40px;
			}
			.nav1 ul li a:hover{
				height: 50px;
				border: none;
				background: #f0f;
				line-height: 50px;
			}
		</style>
	</head>

<body>
		<div class="nav1">
			<ul>
				<li>
					<a href="#">首页</a>
				</li>
				<li>
					<a href="#">首页</a>
				</li>
				<li>
					<a href="#">首页</a>
				</li>
			</ul>
		</div>

实现效果图

在这里插入图片描述