2016-09-05 3 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

Привет! Я пробовал метод ur, но все вкладки отображаются в этом цвете. Я хочу, чтобы текущая вкладка отображалась в этом цвете. –

+0

Если вы хотите изменить цвет фона зависания, отличный от активной вкладки, попробуйте это ..... поместите свой цветовой код на фоновый цвет, который вы хотите, в код ниже кода, который вы уже разместили в своем css ..... ul .nav.nav-pills li a: hover { background-color: # 1E90FF! important; цвет: #fff; } –

Смежные вопросы