2021.5.18

今日学习进度：CSS导航栏

	第一天	第二天	第三天	第四天	第五天
所花时间（小时）	5	6
代码量（行）	200	300
博客量（篇）	1	1
了解到的知识点	CSS伪元素	CSS导航栏1

导航栏

易用的导航对于任何网站都很重要。

通过使用 CSS，您可以将无聊的 HTML 菜单转换为美观的导航栏。

导航栏 = 链接列表

导航栏需要标准 HTML 作为基础。

在我们的实例中，将用标准的 HTML 列表构建导航栏。

导航栏基本上就是链接列表，因此使用 <ul> 和 <li> 元素会很有意义：

实例

<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

现在，从列表中删除项目符号以及外边距和内边距（填充）：

实例

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

例子解释：

• list-style-type: none; - 删除项目符号。导航条不需要列表项标记。
• 设置 margin: 0; 和 padding: 0; 删除浏览器的默认设置。

  垂直导航栏

  • Home
  • News
  • Contact
  • About

  如需构建垂直导航栏，除了上一章中的代码外，还可以在列表中设置 <a> 元素的样式：

  实例

  li a {
    display: block;
     60px;
  }

  例子解释：

  • display: block; - 将链接显示为块元素可以使整个链接区域都可以被单击（而不仅仅是文本），我们还可以指定宽度（如果需要，还可以指定内边距、外边距、高度等）。
  • 60px; - 默认情况下，块元素会占用全部可用宽度。我们需要指定 60 像素的宽度。

  您还可以设置 <ul> 的宽度，并删除 <a> 的宽度，因为当显示为块元素时，它们将占据可用的全部宽度。这将导致与我们之前的例子相同的结果：

  实例

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
     60px;
  } 
  
  li a {
    display: block;
  }

  垂直导航栏实例

  创建背景色为灰色的基础垂直导航栏，并在用户将鼠标移到链接上时改变链接的背景色：

  • Home
  • News
  • Contact
  • About

  实例

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
     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" 类，以使用户知道他/她在哪个页面上：

  • Home
  • News
  • Contact
  • About

  实例

  .active {
    background-color: #4CAF50;
    color: white;
  }

  居中链接以及添加边框

  把 text-align:center 添加到 <li> 或 <a>，使链接居中。

  将 border 属性添加到 <ul>，在导航栏周围添加边框。如果您还希望在导航栏内添加边框，请为所有 <li> 元素添加 border-bottom，最后一个元素除外：

  • Home
  • News
  • Contact
  • About

  实例

  ul {
    border: 1px solid #555;
  }
  
  li {
    text-align: center;
    border-bottom: 1px solid #555;
  }
  
  li:last-child {
    border-bottom: none;
  }

  实例

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
     25%;
    background-color: #f1f1f1;
    height: 100%; /* 全高 */
    position: fixed; /* 使它产生粘性，即使在滚动时 */
    overflow: auto; /* 如果侧栏的内容太多，则启用滚动条 */
  }