Question

我写了以下代码。但是，我没有得到如何更改导航栏的默认蓝色。我希望颜色为＃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>

我正在使用bootstrap 3.当我点击活动标签时，我还想添加像悬停一样的效果

Answer 1

在<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>

Answer 2

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

  <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>

更改导航栏的默认颜色

2 个答案: