0
我是一個初學者，我正在嘗試製作一個簡單的html網頁。我想要將navbar的顏色更改爲藏紅花（＃FF9933）和頁腳爲綠色，但我面臨的問題是，每當我將導航欄顏色更改爲某種顏色時同樣的顏色適用於頁腳還有什麼想法？這裏是代碼： -固定頁腳顏色不變？
<!DOCTYPE html>
<html lang="en">
<head>
<title>Netzach’s</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style> body { font: 400 15px/1.8 Lato, sans-serif; color: ##ff7f00; } h3, h4 { margin: 10px 0 30px 0; letter-spacing: 10px; font-size: 20px; color: #228b22; }
.left{text-align: left;}
.container { padding: 80px 120px; }
.person { border: 10px solid transparent; margin-bottom: 25px; width: 80%; height: 80%; opacity: 0.7; }
.person:hover { border-color: #228b22; }
.carousel-inner img { -webkit-filter: grayscale(90%); filter: grayscale(90%); /* make all photos black and white */ width: 100%; /* Set width to 100% */ margin: auto; }
.carousel-caption h3 { color: #ff7f00!important; } @media (max-width: 600px) { .carousel-caption { display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */ } }
.bg-1 { background: #2d2d30; color: \t #228b22; } .bg-1 h3 {color: #ff7f00;} .bg-1 p {font-style: italic;} .list-group-item:first-child { border-top-right-radius: 0; border-top-left-radius: 0; }
.list-group-item:last-child { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.thumbnail { padding: 0 0 15px 0; border: none; border-radius: 0; } .thumbnail p { margin-top: 15px; color: #555; }
.btn { padding: 10px 20px; background-color: #333; color: #f1f1f1; border-radius: 0; transition: .2s; }
.btn:hover, .btn:focus { border: 1px solid #333; background-color: #fff; color: #000; }
.modal-header, h4, .close { background-color: #228b22; color: #fff !important; text-align: center; font-size: 30px; } .modal-header, .modal-body { padding: 40px 50px; }
.nav-tabs li a { color: #ff7f00; } #googleMap { width: 100%; height: 400px; -webkit-filter: grayscale(100%); filter: grayscale(100%); }
.navbar { font-family: Montserrat, sans-serif; margin-bottom: 0; background-color: #FF9933; border: 0; font-size: 11px !important; letter-spacing: 4px; opacity: 0.9; }
.navbar li a, .navbar .navbar-brand { color: #ff7f00 !important; } .navbar-nav li a:hover { color: #fff !important; }
.navbar-nav li.active a { color: #fff !important; background-color: #ff7f00 !important; } .navbar-default .navbar-toggle { border-color: transparent; }
.open .dropdown-toggle { color: #fff; background-color: #ff7f00 !important; } .dropdown-menu li a { color: #000 !important; }
.dropdown-menu li a:hover { background-color: red !important; }
footer { color: black; padding: 32px; }
footer a { color: #228b22; }
footer a:hover { color: #777; text-decoration: none; }
.form-control { border-radius: 0; } textarea { resize: none; }
td{border-style: groove;}
body{
background-color: white;
}
</style>
<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page --> \t
<link rel="stylesheet" type="text/css" href="engine0/style.css" />
<!--script type="text/javascript" src="engine0/jquery.js"></script--> \t <!-- End WOWSlider.com HEAD section -->
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#myPage"><img src="" alt="Logo"></img></a> </div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#myPage">HOME</a></li>
<li><a href="#band">ABOUT US</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#Services">
SERVICES <!--<span class="caret"></span>-->
</a>
<!--<ul class="dropdown-menu"> <li><a href="#">Electoral</a></li> <li><a href="#">Media P.R</a></li> \t \t \t <li><a href="#">Legal Consultancy</a></li> \t \t \t <li><a href="#">Training and Development</a></li> <li><a href="#">Advertisment</a></li> \t \t </ul> -->
<li><a href="#Assignments">ASSIGNMENTS</a></li>
<li><a href="#Career">CAREER</a></li>
<li><a href="#contact">CONTACT</a></li>
</li>
<li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
</ul>
</div>
</div>
</nav>
<!--
<div id="wowslider-container0"> \t <div class="ws_images"><ul>
<li><img src="data0/images/slide1.jpg" alt="SLIDE" title="SLIDE" id="wows0_0"/></li>
<li><a href="http://wowslider.com"><img src="data0/images/slide2.png" alt="http://wowslider.com/" title="SLIDE" id="wows0_1"/></a></li>
<li><img src="data0/images/slide3.jpg" alt="slide" title="slide" id="wows0_2"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="SLIDE"><span><img src="data0/tooltips/slide1.jpg" alt="SLIDE"/>1</span></a>
<a href="#" title="SLIDE"><span><img src="data0/tooltips/slide2.png" alt="SLIDE"/>2</span></a>
<a href="#" title="slide"><span><img src="data0/tooltips/slide3.jpg" alt="slide"/>3</span></a>
</div></div><div class="ws_script" style="position:absolute;left:-99%"><a href="http://wowslider.com">responsive slider</a> by WOWSlider.com v8.7</div> \t <div class="ws_shadow"></div> \t </div> \t --> \t <script type="text/javascript" src="engine0/wowslider.js"></script> \t <script type="text/javascript" src="engine0/script.js"></script> \t <!-- End WOWSlider.com BODY section --> \t <!-- Container (The Band Section) -->
<div id="band" class="container text-center">
<h3>About Us</h3>
<p class="left">SOME TEXT
</p>
<br> <!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> Tickets</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group"> <label for="psw"><span class="glyphicon glyphicon-shopping-cart"></span> Tickets, $23 per person</label> <input type="number" class="form-control" id="psw" placeholder="How many?"> </div>
<div class="form-group"> <label for="usrname"><span class="glyphicon glyphicon-user"></span> Send To</label> <input type="text" class="form-control" id="usrname" placeholder="Enter email"> </div>
<button type="submit" class="btn btn-block">Pay <span class="glyphicon glyphicon-ok"></span> </button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"> <span class="glyphicon glyphicon-remove"></span> Cancel </button>
<p>Need <a href="#">help?</a></p>
</div>
</div>
</div>
</div>
</div>
<div id="Services" class="container text-center">
<h3>Services</h3>
<div class="row">
<p>
<div class="col-lg-12 col-md-12 col-sm-12">
<h3>Psephological Consultancy:</h3>
We provide solutions at every level at your doorstep. Some of them are:
<table style="border-style: dotted;" class="col-lg-12 col-md-12 col-sm-12">
<tr>
<td>Political surveys</td>
<td>Constituency profiling</td>
</tr>
<tr>
<td>Candidate positioning</td>
<td>Political party position</td>
</tr>
<tr>
<td>Opinion polls</td>
<td>Pre -Poll</td>
</tr>
<tr>
<td>Exit Poll</td>
<td>Tracking Poll</td>
</tr>
<tr>
<td>Election campaign management</td>
<td>Increase voter awareness and support</td>
</tr>
<tr>
<td>Public opinion creation</td>
<td>Bring the voter to booth</td>
</tr>
<tr>
<td>Campaign support </td>
<td>Media and social media support</td>
</tr>
</table>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<br/>
<br/>
<p>
<h3>Market Research</h3>
The skills required for stakeholder research are easily transferable towards addressing client requirements such as market assessment, preparation of concept notes, demand quantification, customer feedback and brand image building. The services are not limited by geography or the industry type. Given our experience in various elections and ready access to top consultants within India and abroad. We will be glad to offer you customized solutions for your market research.
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<br/>
<br/>
<p>
<h3>Media Consultancy</h3>
From providing content outsourcing to training and set up of niche programming streams such as election programming to full fledged turnkey solutions tailored for print and electronic media. Netzach’s is your one stop shop for your consultancy needs. Not only have we successfully operated in diverse media environments such as News Agency, TV Channels, Newspapers, Magazines and Internet media, we have also delivered value to our clients cutting across borders. We are adept at providing localized and customized consultancy suited to the milieu in which our clients operate.
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<p>
<h3>Socio-Economic Research</h3>
Netzach’s is proud to have partnered with academic institutions, NGOs, Independent Researchers and various Industry bodies in production of socio-economic data and research reports. Furthering the frontiers of human well being was one of the founding motives of our organization and we are proud to have done justice to the same. We encourage individuals and bodies engaged in socio-economic research to work with us. our clients cutting across borders. We are adept at providing localized and customized consultancy suited to the milieu in which our clients operate.
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<p>
<h3>Qualitative Consultancy</h3>
Ever felt the need to talk to someone who understands the local polity and culture beyond what the numbers convey? Our team of highly trained analysts and consultants who have years of experience under their belt would be glad to offer you some advice. Not only do we have access to best political analysts in the business we also have a enviable network of consultants who are ready to provide niche consultancy services to our clients.
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<p>
<h3>Public Private Partnerships</h3>
Our experience with democratic processes and formidable skill set in determining policy direction empower us to be an active partner of the host government in public-private partnership projects. Sectors such as Education, Resource mapping, Governance Surveys, Independent Evaluation and Policy assessment are some of the streams that have witnessed active Netzach’s participation or demonstrated deploy-able capability to execute the projects satisfactorily.
</p>
</div>
</div>
</div>
<div id="Assignments" class="container text-center">
<h3>Assignments</h3>
<div class="col-lg-12 col-md-12 col-sm-12 text-center">
<h3>Recent Assignments</h3>
<p></p>
</div>
<br/>
<div class="col-lg-6 col-md-6 col-sm-6 text-center">
<h3>Ongoing project</h3>
<p class="center"></p>
</div>
</div>
<div id="Career" class="container text-center">
<h3>Career</h3>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<p>
<h3>Interns</h3>
Netzach’s offers college and university students a snapshot of professional life that awaits them via a limited number of internships. The selection criteria for the internships are very
stringent and we advise the students to generate a very high quality cover letter and a CV that delineates their extra-curricular and curricular activities to better help us evaluate their merits. Email us to: [email protected]
Please write "Internship" in the subject line of the mail.
We offer Opportunities for professional growth and development
Platform to express freely and multi tasking
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<p>
<h3>Competitive package</h3>
Flexibility and learning while working experience.
</p>
</div>
</p>
<br>
</div>
<!-- Container (Contact Section) -->
<div id="contact" class="container">
<h3 class="text-center">Contact</h3>
<div class="row">
     Please enter your details in the form below or email to [email protected] We will contact you shortly.
<br/>
<br/>
<div class="col-md-4">
<p>Drop a Message here</p>
<p><span class="glyphicon glyphicon-map-marker"></span>Mumbai, India</p>
<p><span class="glyphicon glyphicon-phone"></span>Phone: 000000000</p>
<p><span class="glyphicon glyphicon-envelope"></span>Email: [email protected]</p>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-sm-6 form-group"> <input class="form-control" id="name" name="name" placeholder="Name" type="text" required> </div>
<div class="col-sm-6 form-group"> <input class="form-control" id="email" name="email" placeholder="Email" type="email" required> </div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea>
<br>
<div class="row">
<div class="col-md-12 form-group"> <button class="btn pull-right" type="submit">Send</button> </div>
</div>
</div>
</div>
</div>
<br><br><br><br>
<!--Fixed Footer-->
<footer>
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="navbar-text pull-left">
<p> © 2016 Netzach`s.</p>
</div>
</div>
<br><br> </footer>
<script>$(document).ready(function(){ // Initialize Tooltip $('[data-toggle="tooltip"]').tooltip(); // Add smooth scrolling to all links in navbar + footer link $(".navbar a, footer a[href='#myPage']").on('click', function(event) { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top }, 900, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); });})</script>
</body>
</html>
我已經添加了新的類到頁腳和改變顏色檢查現在 –
您正在使用'.navbar'。這門課被添加到多個領域。這就是爲什麼你有相同的背景顏色。 – Huelfe
thanx很多工作 – Rikcy