2016-09-05 307 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; } –