使用导航栏的Bootstrap自定义标题

我想使用boostrap导航栏类为我的网站制作自定义标题，我想将链接文本颜色更改为白色，将导航栏背景颜色更改为黑色，并更改高亮显示的链接当鼠标移过它们时颜色。使用导航栏的Bootstrap自定义标题

这里是我的html：

<html> 
    <head> 
     <meta charset="UTF-8" /> 

     <!-- css files --> 
     <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/> 
     <link rel="stylesheet" type="text/css" href="main.css"> 

     <!-- javascript --> 
     <script src="jquery.js"></script> 
     <script src="bootstrap/js/bootstrap.min.js"></script> 
    </head> 
    <body> 
     <!-- webiste header --> 
     <nav class="navbar navbar-default navbar-fixed-top header"> 
      <div class="container-fluid"> 
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li><a href="#">link1</a></li> 
         <li><a href="#">link2</a></li>   
        </ul> 
       </div> 
      </div> 
     </nav> 
    <body> 
<html>

，这里是我的CSS：

.header{ 
    background-color:#333333; 
    color:red; 
    font-size:1.5em; 
} 


.header li{ 
    border-bottom:3px solid #333333; 
} 

.header li:hover{ 
    background-color:black; 
    border-bottom:3px solid orange; 
}

一切似乎都工作，但链接的颜色是灰色的，而不是白色，你可以在这个截图中看到。 screenshot

来源

2016-07-28 Alex_Doe

.header a { 
    color: #fff; 
} 

.header a:hover { 
    color: #f00; 
}

来源

2016-07-28 16:55:46 3rdthemagical

使用导航栏的Bootstrap自定义标题

回答

相关问题