这篇文章主要介绍“如何用css制作导航栏”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“如何用css制作导航栏”文章能帮助大家解决问题。

1.首先还是老样子，我们在开发 app 中新建一个 html 文件并且命名为自己喜欢的名字（最好是英文因为可以在之后的工作提中供便利，避免不必要的麻烦），那么我们就来看看代码部分吧！代码如下：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>怎么用css制作导航栏</title></head><body><p>css制作导航栏</p><ul><li><a>主页</a></li><li><a>地圖</a></li><li><a>直播</a></li><li><a>更多</a></li></ul></body></html>

2.在上面的代码块中我们可以看到，我们使用到了ul li a这三个标签，那么接下来我们在 a 标签中加入 href=""这个属性和class类属性，可以方便我们在点击导航栏中实习跳转,在继续添加 link 标签为连接 css 做准备。代码如下：

<html><head><metacharset="utf-8"><title>怎么用css制作导航栏</title><linkhref="css/css导航栏.css"rel="stylesheet"/></head><body><p>css制作导航栏</p><ul><li><aclass="active"href="">主页</a></li><li><ahref="#">地圖</a></li><li><ahref="#">直播</a></li><li><ahref="#">更多</a></li></ul></body></html>

3.在完成之后，我们在新建一个 css 文件，在 css 文件中的 ul 中加入list-style-type: none;从而除掉导航前面默认带的点，设置完成之后在进行设置鼠标滑到之后的一个导航栏变色设置，代码如下：

ul{list-style-type:none;/*去除li中的黑色点*/margin:0;padding:0;width:200px;background-color:antiquewhite;/*设置整个导航栏的背景*/}lia{display:block;color:peru;padding:8px16px;text-decoration:none;}lia.active{background-color:palegreen/*设置第一个导航栏的背景颜色*/}lia:hover:not(.active){/*设置主页不会随着鼠标的移动改变颜色*/background-color:gray;color:white;}

4.在代码块中，小编为大家打了注释，有不懂得小伙伴们可以在CSS教程中学习，那么完成以上步骤我们就可以得到一个垂直的导航栏截图如下：


5.当然在平常的运用中我们比较多的是看到横向的导航栏，如果你要换成横向的导航栏的话只需要在 CSS 中的ul中添加 overflow：hidden；把width：200px；去掉，在添加一个li的浮动为左浮动。代码和截图如下：

ul{list-style-type:none;/*去除li中的黑色点*/margin:0;padding:0;overflow:hidden;background-color:antiquewhite;/*设置整个导航栏的背景*/}li{float:left;/*设置左浮动让文字向右靠拢*/}lia{display:block;color:peru;padding:8px16px;text-decoration:none;}lia.active{background-color:palegreen/*设置第一个导航栏的背景颜色*/}lia:hover:not(.active){/*设置主页不会随着鼠标的移动改变颜色*/background-color:gray;color:white;}

关于“如何用css制作导航栏”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。