详解一级导航的制作

今天分享一下简单导航栏的制作方法：

第一步：引入css样式表，新建一个id为nav的层，使用

、
• 、标签来制作完成效果。

  
  
      
   
   
   
      
      
   
       
  
    
  首页
    
    
  首页
    
    
  首页
    
    
  首页
    
    
  首页
       
   
      
  

  第二步设置CSS样式：

  1.设置nav的属性

  #nav{
      width: 500px;
      height: 50px;
      border: 1px solid red;
  }

  展示效果如下所示：

  
  
  

  2.清除

  标签前面自带的点

  #nav ul{
      list-style: none;
  }

  3.设置

  下包含的标签的属性

  #nav ul li a{
      width: 98px;
      height: 50px;
      float: left;
      border: 1px solid red;
      text-align: center;
      line-height: 50px;
      text-decoration: none;
  }

  4.设置鼠标滑过效果

  #nav ul li a:hover{
      background-color: #ABCDEF;
  }

  最终效果：

  
  
  

  完整HTML代码部分：

  
  
      
   
   
   
      
      
   
       
  
    
  首页
     
    
  首页
     
    
  首页
     
    
  首页
     
    
  首页
       
   
      
  

  完成CSS样式代码部分：

  *{
      margin: 0;
      padding: 0;
  }
  #nav{
      width: 500px;
      height: 50px;
      border: 1px solid red;
      margin: 30px;
  }
  #nav ul{
      list-style: none;
  }
  #nav ul li a{
      width: 98px;
      height: 50px;
      float: left;
      border: 1px solid red;
      text-align: center;
      line-height: 50px;
      text-decoration: none;
  }
  #nav ul li a:hover{
      background-color: #ABCDEF;
  }

  以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持考高分网！