我们在做网站前端页面的时候，导航栏是必不可少的，我们如何才能用CSS做出漂亮的导航栏呢?接下来小编就教教你怎么做一个导航栏!

工具/原料

记事本或者DW等等自己常用的编辑器。

具体的步骤

先码好导航栏所需要的基本的HTML代码

这个就不必多说具体的代码如下：

下面我们通过CSS 来改变他的样式。

首先我们先让导航在浏览器的中间。不过在让他居中前得先设置一个宽度，没有宽度就没法居中，这个的原因我就不用赘述了吧!

现在常用的网站宽度为960或980(当然也有其他的，一些网站会根据访客的显示器大小有不同宽度的样式，原因我就不在这多废话了)我们在这就用980吧。

方法是在之间加入如下代码来改变他的宽度。为了让结果明显，我们给它又加了一个边框。

接下来我们让他居中。我们在样式中加入以下代码。

.nav ul{

width:980px;/*设置元素宽度为980px*/

border:1px solid #000;/*设置一个颜色为#000，宽度为1px的边框*/

margin:0px auto 0px auto;/*也可以简写为margin:0 auto*/

}

因为我们要做的是横向的导航栏，所以现在我们要把它变成横向排列。我们在样式中加入以下代码。

.nav ul li{

float:left;/*让li元素左浮动*/

}

边框之所以挤到一起了是因为浮动以后 li就变成了联级元素，就没有宽和高了，所以也就没法把边框撑起来了啊。(具体的原因想知道可以百度)当然稍后我们可以给ul或.nav加上高度。

接下来，我们通过给元素添加样式，让他更美观。加入以下代码。

.nav ul li a{

width:80px;/*设置元素宽为80px*/

height:28px;/*设置高度为28px*/

line-height:28px;/*设置行距为28px，让文字在每行的中间位置*/

background:red;/*设置元素的背景为红色*/

color:#FFF;/*文字颜色是白色*/

margin:5px 10px;

font-size:12px;/*用12号字*/

display:block;/*这个比较关键，因为a本身就是联级元素，本身不具有宽高，用这个把它变成块级元素，这样前面设置的宽和高就能起作用了*/

text-align:center;/*让文本居中*/

text-decoration:none; /*去掉下划线*/

}

我们再加入点互动，当访客鼠标放到某个元素上的时候，这个元素要有别于其他元素。要实现这个我们就要用到:hover这个伪类。在样式中加入以下代码。

.nav ul li a:hover{ /*这个大概的意思就是当鼠标放到这个a元素的上面时，这个a元素的样式就按下面的代码执行*/

width:78px;

height:26px;

line-height:28px;

border:1px solid red;

color:red;

background:#FFF;

}

最后稍微整理一下代码

.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;

}

思路就是这样的，其中还可以再加一些自己的元素，比如背景图片之类，效果就更好了。