CSS for Navigation Menu on StackOverflow.com - HTML

如果您正在开发一个网站并需要创建一个导航菜单，那么CSS可以帮助您轻松地实现这一点。在StackOverflow.com的导航菜单中，CSS起着重要的作用，它使导航菜单看起来更漂亮，更易于使用。

CSS样式

在StackOverflow.com上，导航菜单的CSS样式如下所示：

/* Navigation Menu Styles */
.navbar {
    margin-bottom: 0;
    background-color: #333333;
    border: none;
}
.navbar-nav {
    display: inline-block;
}
.navbar-right {
    float: right !important;
}
.navbar-brand {
    font-weight: bold;
}
.navbar-default .navbar-toggle {
    border-color: #dddddd;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #dddddd;
}
.navbar-default .navbar-nav > li > a {
    color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #ffffff;
    background-color: #111111;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #ffffff;
    background-color: #111111;
}

CSS样式解释

以下是对上述CSS样式的解释：

• .navbar：设置导航栏的外观。
• .navbar-nav：设置导航菜单项目的外观。
• .navbar-right：将导航菜单项向右对齐。
• .navbar-brand：设置导航菜单中品牌的外观。
• .navbar-default .navbar-toggle：设置导航菜单下拉菜单按钮的外观。
• .navbar-default .navbar-nav > li > a：设置导航菜单中项目的外观。
• .navbar-default .navbar-nav > .active > a：设置当前选定项目的外观。

HTML代码

下面是StackOverflow.com导航菜单的HTML代码：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Stack Overflow</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">Questions</a></li>
        <li><a href="#">Tags</a></li>
        <li><a href="#">Users</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Log In</a></li>
        <li><a href="#">Join The Community</a></li>
      </ul>
    </div>
  </div>
</nav>

HTML代码解释

以下是对上述HTML代码的解释：

• .navbar：设置导航栏的外观。
• .navbar-header：包含导航菜单的标题和下拉菜单按钮。
• .navbar-toggle：下拉菜单按钮，它可以用来显示隐藏的导航菜单项目。
• .navbar-brand：导航菜单中的标题。
• .collapse .navbar-collapse：用于包含导航菜单的项目。
• .nav：用于创建导航菜单。
• .navbar-nav：包含导航菜单项目的容器。
• .navbar-right：将导航菜单项向右对齐。