制作web网页头部导航栏

（1）新建HTML文件。写入代码。

（2） 网页头部导航栏的一堆按钮实际是由

和
• 标签制作的，在body中写入代码。

  
  
      
  
  
          
  首页
          
  影像空间
          
  资讯
          
  影展
          
  器材
          
  热点赛事
      
  

  插入后的代码

  
  
  
      
      
  
  
  
  
  
      
  
  
          
  首页
          
  影像空间
          
  资讯
          
  影展
          
  器材
          
  热点赛事
      
  
  
  
  

  运行效果图。 

   （3）现在都是竖着摆的，所以很明显需要修改属性，新建index.css文件。并在标签中加入如下代码调用css样式表.

  插入位置别错了 

  在index.css文件中，写入代码，用以使网页主体铺满html页面。

  body{
      width: 100%;
      height: 100%;
  }
  
  *{           
      padding:0;
      margin:0;
  }

   效果

   给头部导航栏加个色，一样在index.css文件中写入

  .nav{
      background-color: deepskyblue;  
      height:140px;
      width: 100%;
      line-height:80px;
      position: absolute;
      top: 0px;
      left: 0;
  }

  效果如下，导航栏长度是拉满 ，左右不会空出来,行高80px你也看得懂了吧。

   对头部导航栏中的li进行属性设置

  .nav li{
      float:left;
      width:75px;
      text-align:center;
  }

  效果

   

   再对

  标签进行设置

  .ul_top{
      list-style: none;
      position: absolute;
      top: 70px;
      left: 60px;
  }

   效果如图,位置还可以

   接下来对标签处理，下划线太丑了

  .nav a{
      display:block;
      color:white;
      text-decoration: none;
      width: 80px;
      line-height: 30px;
  }

  效果图，是不是好多了

  .nav a:hover{
      color:white;
      background:green;
  }
  
  

   鼠标放上去

   还可以美化一下，在之前的.nav{ }中加上一句

  background-image: url("图片路径");

  放上一张和头部导航栏一样的图片作背景，

   还可以吧