HTML，如何制作导航栏？
在用html做一个网页时，首先需要处理的是导航栏了。怎样制作一个导航栏？以前的做法基本都是用table来做，现在我们用无序列表ul来做，下面一起来看下。
操作方法
- 01
首先我们写html代码，就是用 ul，li无序列表来放置我们的菜单项，代码如图。
- 02
运行目前的代码，可以看到是一个比较丑陋的导航条。
- 03
添加样式，让导航栏的每一栏横向排列，而不是竖向排列。要横向排列，只需要为li添加样式：display: inline-block;就行了，然后用padding样式为每一项添加一些间距，代码如图。
- 04
继续美化导航项，为链接a添加样式，主要是添加背景色background-color，和加一些间距padding，代码如图
- 05
先运行页面，看下现在的效果。
- 06
接着为当前菜单的页面添加样式，
- 07
再为鼠标经过菜单项时添加hover样式。代码如图，在鼠标经过菜单项时，为菜单项添加了投影效果，并改变了字体颜色。
- 08
我们的导航菜单基本完成了，看下效果，还是不错的。 （如果配色更合理点，就更完美了，这个配色需要有美工功底了：）
赞 (0)