CSS实现垂直/水平导航栏

最新推荐文章于 2025-06-11 08:54:45 发布

每天都学习！

最新推荐文章于 2025-06-11 08:54:45 发布

阅读量2.4w

点赞数 52

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： CSS 导航栏前端垂直水平

本文链接：https://blog.youkuaiyun.com/Xiuhua2017/article/details/89207809

文章目录

一级基本导航栏
二级导航栏
行内元素和块级元素的具体区别是什么？inline-block是什么？
举个例子

一级基本导航栏

怎么显示？导航栏 = 链接列表

导航栏需要标准的 HTML 作为基础。在我们的例子中，将用标准的 HTML 列表来构建导航栏。导航栏基本上是一个链接列表，因此使用 ul 和 li 元素是非常合适的：
```
<div id="nav">
	<ul class="firstNav">
		<li>
			<a href="#">一级菜单1</a>
		</li>
		<li>
			<a href="#">一级菜单2</a>
		</li>
		<li>
			<a href="#">一级菜单3</a>
		</li>
	</ul>
</div>
```
以上是标准的导航栏代码。

去掉list-style-type，去掉默认的项目符号和外边距、内边距:

	ul {
     
     
		list-style-type: none;
		padding: 0;
		margin: 0;
	}

垂直导航栏

一级垂直菜单

display: block：把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。行内元素无法设置物理width。inline-block、block、inline分析
width: 140px：块元素默认占用全部可用宽度。我们需要规定 140 像素的宽度。
line-height：可以用来实现垂直居中效果，水平居中用text-align: center。
对锚点设置而不是li设置，由此提供更好的浏览器兼容性。

<!DOCTYPE html>
<html>
<head>
	<title>导航栏</title>
	<style type="text/css">
		ul {
    
    
			list-style-type: none;
			padding: 0;
			margin: 0;
		}
		#nav>ul>li {
    
    
			text-align: center;
		}
		a {
    
    
			display: block;	/*垂直排列，且点击区域为方块*/
			width: 100px;	/*block可设置width*/
			line-height: 40px; /*获得垂直居中效果*/
			text-decoration: none;
			color: white;
			background-color: black;
			border: 1px solid white;
		}
	</style>
</head>
<body>
	<div id="nav">
		<ul class="firstNav">
			<li>
				<a href="#">一级菜单1</a>
			</li>
			<li>
				<a href="#">一级菜单2</a>
			</li>
			<li>
				<a href="#">一级菜单3</a>
			</li>
		</ul>
	</div>
</body>
</html>

水平导航栏

两种方法：行内元素(inline-block)和浮动(float)

行内元素
```
 	#nav>ul>li {
     
     
		text-align: center;
		display: inline-block;
	}
```
li默认是块内元素，前后有换行，设置成inline-block后，同时具有inline同行水平排列和block可以设置width等属性的特点。
不足：会有间隔，因为原本的block元素前后有换行，使用inline-block之后，元素之间会有间隔。如何解决看inline-block、block、inline分析。

浮动

	#nav>ul>li {
     
     
		text-align: center;
		float: left;
	}

浮动方法：没有间隔，紧挨着

float:left - 使用 float 来把块元素滑向彼此。
可以发现，元素之间的间隔仅为设置的border的1px间隔，也就是浮动元素之间是紧挨着的，这点与inline-block区分开。
不足：float会有副作用，需要设置clear:both清除浮动带来的可能的坍塌后果。

二级导航栏

垂直二级

二级垂直菜单

css:

ul {
   
   
			list-style-type: none;
			padding: 0;
			margin: 0;
		}
		#nav>ul>li {
   
   
			text-align: center;
			float: left;
			/*display: inline-block;*/
		}
		a {
   
   
			display: block;	/*垂直排列，且点击区域为方块*/
			width: 100px;	/*block可设置width*/
			line-height: 40px; /*获得垂直居中效果*/
			text-decoration: none;
			color: rgb(133, 119, 114);
			background-color: rgb(237, 237, 237);
			/*border: 1px solid white;*/
		}
		.firstNav::after {
   
   
			content: '';
			clear: both;
			display: block;
		}
		.secondNav a {
   
   
			background-color: rgb(237, 237, 237);
			border-bottom: 1px solid white;
		}
		.secondNav {
   
   
			display: none;
		}
		.firstNav>li:hover >a{
   
   
			background-color: rgb(101, 101, 101);
			color: white;
		}
		.firstNav>li:hover .secondNav {
   
   
			display: block;
		}

结构:

<div id="nav">
		<ul class="firstNav">
			<li>
				<a href="#">一级菜单1</a>
				<ul class="secondNav">
					<li><a href="#">二级菜单1.1</a></li>

最低0.47元/天解锁文章

200万优质内容无限畅学