学习了这么久的CSS，我们现在也可以小试牛刀一下了，我们使用我们学会的CSS知识来制作一个导航栏。
我们都知道，在现代的导航栏里面，最普遍的就是使用无序列表来制作导航栏。
我们可以使用如下代码来制作一个横向的导航栏
???<ul> ???????<li><a href="#home">主页</a></li> ???????<li><a href="#news">通知</a></li> ???????<li><a href="#things">订单</a></li> ???????<li><a href="#contact">联系方式</a></li> ???????<li><a href="#gen">个人</a></li> ???????<li><a href="#about">关于</a></li> ???</ul>
这就是一个典型的用UL制作的导航栏了。这个原装的货色就是这样子的。
然后现在我们使用CSS来给导航栏加上样式。
看会变成什么样子。我们首先去掉它的列表样式，然后把内外边距全部设置为0.
ul { ???list-style-type: none; ???margin: 0; ???padding: 0;}这样一来它就会贴紧浏览器的边缘。并去掉了列表的标志。
上面的例子中的CSS代码是垂直和水平导航栏使用的标准代码。
为了让列表和周围的样式区别开来，我们给列表加上背景颜色，并设定宽度。
ul{ ???list-style-type: none; ???margin: 0; ???padding: 0; ???width: 200px; ???background-color: #f1f1f1;}设置完成之后这个导航栏的效果是这样的。
但是我们感觉这个链接之间还是太挤了。给链接加一些高度间隙。
在增加间距的时候我们首先要做的是就是把<a>变成一个块元素，不然是不能给内联元素增加内外边距的。
所以我们使用以下代码来给链接增加边距。
ul{ ???list-style-type: none; ???margin: 0; ???padding: 0; ???width:200px; ???background-color: #f1f1f1; ???}li a{ ???display:block; ???padding:8px 8px; ???text-decoration: none;}li a:hover { ???background-color: #555; ???color: white;}这样一个简单的垂直导航栏就做完了。
如果需要做一个横向的导航栏，只需要把li的float属性设置为left即可。
我们看一个横向导航栏的例子：
ul{ ????list-style-type:none; ????margin:0; ????padding:0; ????background-color: #333; ????overflow: hidden; } li { ???float: left;} li a{ ????display:block; ????text-decoration: none; ????color:white; ????padding:14px 16px; } li a:hover { ???background-color: #111;}这里使用float:left来实现了display:inline;同样的效果，但值得注意的是。
在使用float:left;来进行横向显示的时候，必须要设置overflow: hidden;
PHP全栈开发（八）：CSS Ⅹ 导航栏制作
原文地址：https://www.cnblogs.com/sparrow32/p/9488302.html