CSS基础学习--18 导航栏

 一、导航栏=链接列表

作为标准的 HTML 基础一个导航栏是必须的。

在我们的例子中我们将建立一个标准的 HTML 列表导航栏。

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

和
• 元素非常有意义

  
  
   
   
   
  
  
  
  主页
  新闻
  联系
  关于
  
  
  注意：这里我们用 href="#"作为测试连接。但在一个真正的 web 站点上需要真实的 url。
  
  
  

  

  现在，让我们从列表中删除边距和填充

  

   

  例子解析：

  • list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记
  • 移除浏览器的默认设置将边距和填充设置为0

  二、垂直导航栏

  我们只需要 元素的样式，建立一个垂直的导航栏

  
  
  
   
   
  
  
  
  
  
  	
  主页
  	
  新闻
  	
  联系
  	
  关于
  
  
  背景颜色添加到链接中显示链接的区域。
  注意，整个区域是可点击的链接，而不仅仅是文本。
  
  
  

  

  示例说明：

  • display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
  • width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度

  创建一个简单的垂直导航条实例，在鼠标移动到选项时，修改背景颜色

  ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 200px;
      background-color: #f1f1f1;
  }
   
  li a {
      display: block;
      color: #000;
      padding: 8px 16px;
      text-decoration: none;
  }
   
  /* 鼠标移动到选项上修改背景颜色 */
  li a:hover {
      background-color: #555;
      color: white;
  }

  三、激活/当前导航条实例

  在点击了选项后，我们可以添加 "active" 类来标注哪个选项被选中

  
  
  
  
  
  
  
  
  
  垂直导航条
  在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中。
  
  
    
  主页
    
  新闻
    
  联系
    
  关于
  
  
  
  

  

   四、创建链接并添加边框

  可以在

• or 上添加text-align:center 样式来让链接居中。

  可以在 border 

  上添加 border 属性来让导航栏有边框。如果要在每个选项上添加边框，可以在每个
  • 元素上添加border-bottom :

    
    
    
    
    
    
    
    
    
    垂直导航条
    以下实例让每个链接居中，并给每个列表选项添加边框。
    
    
      
    主页
      
    新闻
      
    联系
      
    关于
    
    
    
    

    

     五、全屏高度的固定导航条

    接下来我们创建一个左边是全屏高度的固定导航条，右边是可滚动的内容

    
    
    
    
    
    
    
    
    
    
      
    主页
      
    新闻
      
    联系
      
    关于
    
    
    
      
    Fixed Full-height Side Nav
      
    Try to scroll this area, and see how the sidenav sticks to the page
      
    Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.
      
    Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).
      
    Some text..
      
    Some text..
      
    Some text..
      
    Some text..
      
    Some text..
      
    Some text..
      
    Some text..
    
    
    
    

    

    注意: 该实例可以在移动设备上使用

    六、水平导航栏

    有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。

    这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。

    6.1、内联列表项

    
    
    
     
     
    
    
    
    
    
    主页
    新闻
    联系
    关于
    
    
    
    

     

    实例解析：

    • display:inline; - 默认情况下，
    •  元素是块元素。在这里，我们删除换行符之前和之后每个列表项，以显示一行。

     6.2、浮动列表项

    在上面的例子中链接有不同的宽度。

    对于所有的链接宽度相等，浮动

  • 元素，并指定为 元素的宽度

    
    
    
     
     
    
    
    
    
    
    Home
    News
    Contact
    About
    
    
    注意: 如果 !DOCTYPE 没有定义, floating 可以产生意想不到的结果.
    
    背景颜色添加到链接中显示链接的区域。整个链接区域是可点击的,不仅仅是文本。
    
    注意: overflow:hidden 添加到 ul 元素,以防止 li 元素列表的外出。.
    
    
    

    

             

    实例解析：

    • float:left - 使用浮动块元素的幻灯片彼此相邻
    • display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
    • width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度

    水平导航条实例：

    
    
    
    
    
    
    
    
    
    
      
    主页
      
    新闻
      
    联系
      
    关于