一步步教你使用CSS制作一个简单美观的导航栏（代码详解） 怎样用css制作导航栏

使用css制作页面的时候，想做一个简单美观的导航栏，怎么做呢，下面来分享一下方法。

导航栏+链接列表

导航条基本上是一个链接列表，所以使用

和
• 元素。

  代码示例

  
  php主页
  视频
  技术
  关于
  

  代码效果图

  

  注意：这里我们用 href=”#”作为测试连接。

  可以添加 “active” 类，选择【php主页】选项。

  代码示例

  php主页

  制作导航栏

  通过

  的格式来实现导航栏。

  代码示例

  
  
  ul {
      list-style-type: none;
      margin: 1px;
      padding: 0px;
      width: 100px;
      background-color: #f7f4f1;
      text-align:center;
  }
  
  li a {
      display: block;
      color: #000;
      padding: 8px 16px;
      text-decoration: none;
  }
  
  li a.active {
      background-color: #6477;
      color: white;
  }
  li a:hover:not(.active) {
      background-color: #505;
      color: white;
  }
  
  
  
  
  
    
  php主页
    
  视频
    
  技术
    
  关于
  
  
  
  

  代码效果图