记事本或者DW等等自己常用的编辑器。
先码好导航栏所需要的基本的HTML代码 这个就不必多说具体的代码如下：
下面我们通过CSS 来改变他的样式。 首先我们先让导航在浏览器的中间。不过在让他居中前得先设置一个宽度，没有宽度就没法居中，这个的原因我就不用赘述了吧！ 现在常用的网站宽度为960或980（当然也有其他的，一些网站会根据访客的显示器大小有不同宽度的样式，原因我就不在这多废话了）我们在这就用980吧。 方法是在之间加入如下代码来改变他的宽度。为了让结果明显，我们给它又加了一个边框。 测试结果如图2
接下来我们让他居中。我们在样式中加入以下代码。.nav ul{width:980px;/*设置元素宽度为980px*/border:1px solid #000;/*设置一个颜色为#000，宽度为1px的边框*/margin:0px auto 0px auto;/*也可以简写为margin:0 auto*/} 测试结果应为图3。
我们再加入点互动，当访客鼠标放到某个元素上的时候，这个元素要有别于其他元素。要实现这个我们就要用到:hover这个伪类。在样式中加入以下代码。.nav ul li a:hover{ /*这个大概的意思就是当鼠标放到这个a元素的上面时，这个a元素的样式就按下面的代码执行*/width:78px;height:26px;line-height:28px;border:1px solid red;color:red;background:#FFF;} 测试结果如图6
最后稍微整理一下代码 .nav ul{width:980px;margin:0px auto;height:38px;padding:0;}.nav ul li{float:left;}.nav ul li a{width:80px;height:28px;line-height:28px;background:red;color:#FFF;margin:5px 10px;font-size:12px;display:block;text-align:center;text-decoration:none; }.nav ul li a:hover{width:78px;height:26px;line-height:28px;border:1px solid red;color:red;background:#FFF;} 看看效果，成功没？ 思路就是这样的，其中还可以再加一些自己的元素，比如背景图片之类，效果就更好了。
需要注意的就是 float:left 和 display:block; 伪类也可以看看