如何用DIV+CSS做漂亮的横排导航栏（百度经验）

我们在做网站前端页面的时候，导航栏是必不可少的，我们如何才能用CSS做出漂亮的导航栏呢？那么就看下面的方法吧

具体的步骤

1. 1

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

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

   
   

    

      

   • 首页

      

   • 导航1

      

   • 导航2

      

   • 导航3

      

   • 导航4

      

   • 导航5

      

   • 导航6

    

   
   

   测试结果应为下图（1）

   

2. 
   

3. 
   

4. 
   

5. 2

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

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

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

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

   
   

   测试结果如图2
   

   

6. 
   

7. 
   

8. 3

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

   .nav ul{

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

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

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

   }

   
   

   测试结果应为图3。
   

   

9. 
   

10. 
    

11. 4

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

    
    

    .nav ul li{

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

    }

     我们看到测试结果如图4。
    

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

    
    

    

12. 
    

13. 5

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

    .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; /*去掉下划线*/

    }

    效果如图5
    

    

14. 
    

15. 6

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

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

    width:78px;

    height:26px;

    line-height:28px;

    border:1px solid red;

    color:red;

    background:#FFF;

    }
    

    测试结果如图6

    
    

    
16. 
    
17. 7

    最后稍微整理一下代码
    

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

    }

     看看效果，成功没？

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

    
    

    
    END

注意事项

• 需要注意的就是 float:left 和 display:block;
  

  伪类也可以看看