不使用我的CSS样式的导航栏的背景颜色

  • Z时代
  • 2024-01-10
  • 分类：问答

我可以看到很多Stackoverflow和在线的不同方法来改变我的启动导航菜单的背景颜色，但它不工作，我只是不明白为什么。不使用我的CSS样式的导航栏的背景颜色

我试过删除我的其他CSS项目，以防他们是一个问题。我也尝试从导航div中删除id。

我的HTML：

<!DOCTYPE html> 
<html lang="en" > 
<head> 
    <meta charset="UTF-8"> 
    <title>Basic Front End Portfolio Page</title> 
     <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
    <!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<div> 
<nav class="navbar navbar-default"> 
<div id="headertitlebar" class="container-fluid"> 
    <div class="navbar-header"> 
    <div id="title" class="navbar-brand"> 
    <p><a href="#" id="logo">johnsonville.net</a></p> 
    </div> 
    </div> 
    <div id="navigation"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="#">Home</a></li> 
     <li class="active"><a href="#">Portfolio</a></li> 
     <li class="active"><a href="#">Contact</a></li> 
    </ul> 
    </div> 
</div> 
    </nav> 
    <div id="mainpage"> 
    <p> 
    <h3>I'm a beginner front end developer but an experienced DBA that is working to gather depth as a full stack developer. 
    </div> 
    </p> 
    <div id="portfoliopage"> 
    </div> 
    <div id="contactpage"> 
    </div> 
</div> 
</body> 
</html>

我的CSS：

#headertitlebar { 
    background-color: firebrick; 
    padding-left: 50px; 
    padding-right: 50px; 
} 
#title { 
    font-family: courier new; 
    font-size: 30px; 
    font-weight: 900; 
} 
#logo { 
    text-decoration: none; 
    color: black; 
} 
.nav li { 
background: red; 
}

回答：

把CSS上.navbar默认类。

.navbar-default { 
    background-color: firebrick; 
}

总是适合我。 希望能帮到你吗？

我试过你的示例和1件事情是一个问题，你必须使用bootstrap的CSS BEFORE自定义CSS。像：

<!DOCTYPE html> 
<html lang="en" > 
<head> 
    <meta charset="UTF-8"> 
    <title>Basic Front End Portfolio Page</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
    <!-- Latest compiled and minified CSS --> 
<style>#headertitlebar { 
    background-color: firebrick; 
    padding-left: 50px; 
    padding-right: 50px; 
} 
#title { 
    font-family: courier new; 
    font-size: 30px; 
    font-weight: 900; 
} 
#logo { 
    text-decoration: none; 
    color: black; 
} 
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { 
    background-color: red; 
} 
</style> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<div> 
<nav class="navbar navbar-default"> 
<div id="headertitlebar" class="container-fluid"> 
    <div class="navbar-header"> 
    <div id="title" class="navbar-brand"> 
    <p><a href="#" id="logo">johnsonville.net</a></p> 
    </div> 
    </div> 
    <div id="navigation"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="#">Home</a></li> 
     <li class="active"><a href="#">Portfolio</a></li> 
     <li class="active"><a href="#">Contact</a></li> 
    </ul> 
    </div> 
</div> 
    </nav> 
    <div id="mainpage"> 
    <p> 
    <h3>I'm a beginner front end developer but an experienced DBA that is working to gather depth as a full stack developer. 
    </div> 
    </p> 
    <div id="portfoliopage"> 
    </div> 
    <div id="contactpage"> 
    </div> 
</div> 
</body> 
</html>

然后你的css不会被bootstrap的覆盖。

然后：我为你编辑好了吗？新的CSS。

以上是 不使用我的CSS样式的导航栏的背景颜色 的全部内容， 来源链接： utcz.com/qa/257512.html

回到顶部