前端场景1__横向纵向导航栏

最新推荐文章于 2024-03-15 10:10:22 发布

chiriwu

最新推荐文章于 2024-03-15 10:10:22 发布

阅读量1.6k

点赞数 2

分类专栏：前端文章标签：前端 css css3

本文链接：https://blog.csdn.net/qq_43137001/article/details/121425206

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

横向导航栏

重点：

横向排列： li标签设置 display: inline-block; (inline-block会由于代码换行会在界面产生间隙可通过float: left;消除)
样式设计：去除li，a的默认标记,消除ul的默认内边距，外边距(li下的ul子元素排列)

效果:
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>顶部导航栏</title>
	<style>
		/*去除li标签的默认圆心标记和a标签的下划线*/
		li {
			list-style-type: none;
		}
		a {
			text-decoration: none;
		}
		/*将一级标签变成横向*/
		nav > li{
			display: inline-block;
			float: left;
			margin: 1px;
			width: 100px;
			text-align: center;
		}
		.second_level{
			display: none;
		}
		li:hover {
			background-color: lightgrey;
		}
		/*显示二级菜单*/
		li:hover  .second_level{
			display: block;
			width: 100%;
			text-align: center;
			background-color: cyan;
			
		}
		.second_level li {
			box-sizing: border-box;
			padding: 13px 0;
		}
		.second_level li:hover{
			background-color: red;
		}
		/*消除ul标签的默认边距*/
		ul.second_level{
			padding: 0;
			margin: 0;
		}
	</style>
</head>
<body>
	<nav>
		<li>
			<span>苹果</span>
			<ul class="second_level">
				<li><a href="javascript:void(0);">红富士</a></li>
				<li><a href="javascript:void(0);">黄元帅</a></li>
				<li><a href="javascript:void(0);">蛇果</a></li>
				<li><a href="javascript:void(0);">澳洲青苹</a></li>
			</ul>
		</li>
		<li>香蕉</li><li>橙子</li>
		<li>
			<span>西瓜</span>
			<ul class="second_level">
				<li><a href="javascript:void(0);">麒麟西瓜</a></li>
				<li><a href="javascript:void(0);">无籽西瓜</a></li>
				<li><a href="javascript:void(0);">黑皮西瓜</a></li>
				<li><a href="http:www.baidu.com">特小凤西瓜</a></li>
			</ul>
		</li>

		<li>葡萄</li>
	</nav>
</body>
</html>

纵向导航栏

重点：
1. 子菜单位置：父级li设置position:relative; 子级ul设置 position:absolute;
2. 样式设计：去除li，a的默认标记,消除ul的默认内边距，外边距(li下的ul子元素排列)
效果：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>侧边导航栏</title>
	<style>
		a{
			text-decoration: none;
		}
		a:hover{
			text-decoration: underline;
		}
		ul {
			padding: 0;
			margin: 0;
		}
		li{
			list-style: none;
		}
		.left {
			 width: 200px;
			 background-color: cyan;
			 height: 500px;
			 margin-top: 50px;
		}
		.fruits{
			width: 100%;
			text-align: center;
			padding: 10px;
			box-sizing: border-box;
			position: relative;
		}
		.fruits:hover{
			background-color: red;
		}
		.fruits::after{
			content: "";
			display: block;
			clear: both;
		}
		.fruits a{
			 float: left;
			 display: inline-block;
			 width: 80%;
		}
		.fruits i{
			display: inline-block;
			width: 20%;
			float: right;
			color: white;
		}
		.second_level{
			display: none;
			position: absolute;
			left: 105%;
			top: -25px;
			width: 100px;
			background-color: pink;
		}
		.second_level::after{
			content: " ";
			display: block;
			border: 6px solid red;
			border-color: transparent pink transparent transparent;
			position: absolute;
			top: 35px;
			left: -10px;
		}
		.fruits:hover .second_level{
			display: block;
		}
	</style>
</head>
<body>
	<div class="left">
		<li class="fruits">
			<a href="javascript:void(0);">西瓜</a><i>></i>
			<ul class="second_level">
				<li><a href="javascript:void(0);">麒麟西瓜</a></li>
				<li><a href="javascript:void(0);">无籽西瓜</a></li>
				<li><a href="javascript:void(0);">黑皮西瓜</a></li>
				<li><a href="http:www.baidu.com">特小凤西瓜</a></li>
			</ul>
		</li>
		<li class="fruits"><a href="javascript:void(0);">香蕉</a><i>></i></li>
		<li class="fruits">
			<a href="javascript:void(0);">苹果</a><i>></i>
			<ul class="second_level">
				<li><a href="javascript:void(0);">红富士</a></li>
				<li><a href="javascript:void(0);">黄元帅</a></li>
				<li><a href="javascript:void(0);">蛇果</a></li>
				<li><a href="javascript:void(0);">澳洲青苹</a></li>
			</ul>
		</li>
		<li class="fruits"><a href="javascript:void(0);">橙子</a><i>></i></li>
		<li class="fruits"><a href="javascript:void(0);">葡萄</a><i>></i></li>
		<li class="fruits"><a href="javascript:void(0);">荔枝</a><i>></i></li>
	</div>
</body>
</html>