2016-09-05 255 views
3

我写了下面的代码。但是,我没有得到如何更改导航栏的默认蓝色。我想要的颜色为#1E90FF更改导航栏的默认颜色

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<style> 
    .row.content {height: 1500px} 
      .sidenav { 
     background-color: #f1f1f1; 

     height: 100%; 
    } 

    @media screen and (max-width: 767px) { 
     .sidenav { 
     height: auto; 
     padding: 15px; 
     } 
     .row.content {height: auto;} 
    } 

header {background: #1E90FF;color:white;padding: 35px;} 
footer {background: #1E90FF;color:white;padding: 15px;} 

} 
</style> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>List Of Forms</title> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body onload="fetchAmounts()"> 
<script src="prefilledform.js"> </script> 
<br> 



<center> 
<div class="container-fluid"> 
<header> 
    <h1>Employee Reimbursement Forms</h1> 
</header> 
<div class="row content"> 
<div class="col-sm-3 sidenav"> 
<h4>Forms</h4> 
<ul class="nav nav-pills nav-stacked"> 
<li class="active"><a href="#section1">Home</a></li> 
    <li><a href="#">London</a></li> 
    <li><a href="#">Paris</a></li> 
    <li><a href="#">Tokyo</a></li> 
</ul> 
<br> 
<br> 
</div> 
<div class="col-sm-9"> 


<h2>Account History </h2> 

<div> 
<footer>Logged in as: <%out.println(request.getAttribute("name")); %></footer> 
</div> 
</div> 
</center> 
</body> 
</html> 

我使用的引导3.我也想添加像悬停效果时,我会点击活动标签

回答

2

包括本页面<style></style>标签用于将上按页以及

进行混合的两种色调给人像一个辉煌的效果:

<style> 
    .nav-pills > li.active > a, .nav-pills > li.active > a:focus { 
     color: black; 
     background-color: #1E90FF; 
    } 

     .nav-pills > li.active > a:hover { 
      background-color: #efcb00; 
      color:black; 
     } 
</style> 
0

尝试这种风格它会帮助你...

<style type="text/css"> 
     ul.nav.nav-pills li.active a{ 
      background-color: #1E90FF!important; 
     } 

     ul.nav.nav-pills li a:hover{ 
      background-color: #1E90FF!important; 
      color: #fff; 
     } 
    </style> 
+0

嘿!我试过你的方法,但所有的选项卡都以这种颜色显示。我希望当前标签以该颜色显示。 –

+0

如果您想更改悬停背景颜色不同于活动选项卡,请尝试此操作.....将您的颜色代码放置在您想要的以下代码代码中的背景颜色中,您已将其放置在CSS中..... ul .nav.nav-pills li a:hover { background-color:#1E90FF!important; color:#fff; } –