CSS导航栏浅谈

随风走八百里

已于 2022-03-01 11:41:03 修改

阅读量3k

点赞数 2

文章标签： css 前端

于 2022-02-27 21:38:06 首次发布

本文链接：https://blog.csdn.net/Fengzechen_/article/details/123129751

版权

我们都知道，现在写出导航栏的方式有很多，而今天我给大家带来最简单的且最主要写出导航栏的方法，也就是用css来写出。

用css来写的话主要分为垂直导航栏和水平导航栏，当然其中也有很多“衍生品”，但是大多数都是将导航栏写的更好看，更精致美观，或者是功能更加齐全

但是在这里我来给大家浅谈一下，可以让新手小白更直观的了解用css来写出导航栏方法，所以这里介绍的相对基础，也更容易理解了

垂直导航栏：

首先我们得知道导航栏是这么构成的：

<ul>
			<li><a href="">中国</a></li>
			<li><a href="">江西</a></li>
			<li><a href="">南昌</a></li>
			<li><a href="">江信学院</a></li>
		</ul>

在这里我们看到导航栏的基本构成是ul>li 标签构成的，其中加了a标签，是因为导航栏是需要一个连接去跳转到的页面

效果是这个样子的，但是，不是很美观特别是前面还有这个点看起来太膈应了所以我们把它给去掉

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

list-style-type:none ；这串代码把列表的的前面的小圆点给去除了，margin和padding则是把边距给去除了

效果如图所示，这样看肯定也是少了点什么东西的，毕竟作为导航栏，这样看起来也有点奇怪，

既然作为导航栏，那么得有需要有一个鼠标选中功能，我们利用伪类hover给它添加

li a:hover{
				background-color: blueviolet;
				color: black;
			}

background-color为选框颜色，color则为选中时字体颜色

在添加伪类的同时稍微为给它修饰了一下，给了ul一个宽度，以及背景颜色，后面代码我会给出，到了现在导航栏的大概样子给出来了，再给他修饰一个小细节，比如像有些导航然它会默认选择一个选项，这个简单我们添加一个active属性（在标签里面添加一个class）来表示

li a.active{
				background-color: green;
				
			}

这边可以看到我们是默认选中了中国，效果也是现了出来。

基本样式样式已经写出来了，最后就是给导航栏添加一个边框，那就分别写上这几个属性

ul {
    border: 1px solid #555;
}
li {
    text-align: center;
    border-bottom: 1px solid #555;
}

最后就Ok了，这就是最基本的垂直导航栏全部体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			ul{
				list-style-type:none ;
				margin: 0;
				padding: 0;
				width: 200px;
				background-color: brown;
				border: 1px solid #555;
			}
			li{
				text-align: center;
				border-bottom: 1px solid #555;
			}
			li a{
				display: block;
				color: antiquewhite;
				text-decoration: none;	
			}
			li a:hover{
				background-color: blueviolet;
				color: black;
			}
			li a.active{
				background-color: green;
				
			}
		</style>
	</head>
	<body>
		<ul>
			<li><a class="active" href="">中国</a></li>
			<li><a href="">江西</a></li>
			<li><a href="">南昌</a></li>
			<li><a href="">江信学院</a></li>
		</ul>
	</body>
</html>

水平导航栏：

水平导航栏与垂直导航栏的基本结构相似，只是在水平导航栏里用到了浮动，那我们接下来看看吧

在这里我们同样去除了表格前的小圆点内外边距，效果如图

给它写成块元素，这样文本元素就不会被影响，在加上一个背景底色

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


a{
				display: block;
				width: 100px;
				background-color: #dddddd;
			}

效果如图所示，其中要注意一个点添加了一个overflow属性，目的是为了防止li标签里的文本溢出，而hidden属性则是可以隐藏起来

这一步大家相信就很熟悉了吧，跟垂直导航栏特别相似，所以在这我就不把部分代码写下了后面我会把全部代码给贴上，那时候大家在看看，一般的导航栏都有默认导航页就类似于首页的这种，所以我也给给它写出来：

li a.active{
				background-color: green;
			}

如图所示，绿色的背景色则为默认的导航页

有些水平导航栏在最右边也有链接我们也可以给它写个行内样式把它浮动过去

最后我们给水平导航栏添加分割线，在这里是和垂直导航栏是不一样的，我们只需要在li标签里写上border-right这个属性

li{
				float: left;
				border-right:1px solid red ;
			}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
				overflow: hidden;
				background-color: beige;
				
			}
			li{
				float: left;
				border-right:1px solid red ;
			}
			li a{
				display: block;
				width: 100px;
				text-align: center;
				text-decoration: none;
			}
			li a:hover{
				background-color: blueviolet;
			}
			li a.active{
				background-color: green;
			}
			
		</style>
	</head>
	<body>
		<ul>
			<li><a  href="">中国</a></li>
			<li><a href="">江西</a></li>
			<li><a href="">南昌</a></li>
			<li style="float: right;"><a class="active" href="">江信学院</a></li>
		</ul>
	</body>
</html>


<!-- 垂直导航样式
ul{
				list-style-type:none ;
				margin: 0;
				padding: 0;
				width: 200px;
				background-color: brown;
				border: 1px solid #555;
			}
			li{
				text-align: center;
				border-bottom: 1px solid #555;
			}
			li a{
				display: block;
				color: antiquewhite;
				text-decoration: none;	
			}
			li a:hover{
				background-color: blueviolet;
				color: black;
			}
			li a.active{
				background-color: green;
				
			} -->

OK了，铁汁们，css基本的的垂直导航栏与水平导航栏就介绍到这了，这都是最基本的，铁子们可以利用css样式写出更加精美漂亮的导航栏，我们下期再见！