所以我为这个披萨网站编码,而我遇到了一个问题-我想在导航栏上放置这个地方的徽标(这也是指向主页的链接),但我无法显示它。我正在使用Twitter引导程序。这是代码:



/*#557c3e zielony*/
/*#F8B004 zloty*/
/*body {
  padding-top: 80px;
}*/
body {
  font-family: 'news cycle', serif;
  background-color: #660000;
}
.navbar {
  background-color: #557c3e;
  position: relative;
  height: 180px;
  border-radius: 0;
  border: 0;
}
.row {
  display: flex;
  justify-content: center;
 }
#logo {
  background-image: url('/wzgorzeSmakowMarcin/logo/logoMedium.png');
  width: 431px;
  height: 146px;
  margin-left: 15px;
}
.nav-pills {
  text-transform: uppercase;
  font-size: 1.5em;
  text-align: center;
  vertical-align: center;
  margin-top: 45px;
}
.nav-pills span, a {
  color: #F8B004;
}
.nav-pills span {
  font-size: 150%;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
  background-color: #f2f2f2;
  border-color: #f2f2f2;
  color: #F8B004;
}
#logoFB {
  max-width: 100px;
}
#logoFB:hover{
  background-color: #557c3e;
  border-color: #557c3e;
  color: #557c3e;
}
ul > li {
  margin-right: 50px;
}
h2 {
  text-align: center;
  color: #F8B004;
  line-height: 2;
}
#promocje {
  color: #F8B004;
  font-size: 1.5em;
}
h2> ol > li:hover {
  background-color: #F2F2F2;
  color: #976a02;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Kontakt - Wzgórze Smaków</title>
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
  <div class="row">
  <a class="navbar-brand" href="index.html"><div id="logo"></div></a>
  <ul class="nav nav-pills">
    <li role="presentation"><a href="menu.html"><span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs">Menu</a></li>
    <li role="presentation"><a href="promocje.html"><span class="glyphicon glyphicon-piggy-bank"></span><br class="hidden-xs">Promocje</a></li>
    <li role="presentation" class="active"><a href="kontakt.html"><span class="glyphicon glyphicon-earphone"></span><br class="hidden-xs">Kontakt</a></li>
    <li><a href="tel:691 671 702"><span id="nrTel">Zadzwoń! <div>691 671 702</div></span></a></li>
    <li><a target="_blank" href="https://www.facebook.com/wzgorzesmakow/?fref=ts"><img src="wzgorzeSmakowMarcin/facebook.png" id="logoFB"></a></li>
  </ul>

    </div>
  </div>
</nav>


	<div class="container" id="glowna">
	<!-- glowna czesc -->
	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2441.4953626985284!2d16.848684315860655!3d52.270708262426325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470451f45b8ebb65%3A0xdeb8ff981de52abc!2sDworcowa+58%2C+62-040+Puszczykowo!5e0!3m2!1spl!2spl!4v1470346020342" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

	<h2>Puszczykowo, ul. Dworcowa 58
	<div><a href="tel:691 671 702">691 671 702</a></div>
	<div>ZAPRASZAMY!</div>
	</h2>
	</div>

  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/script.js"></script>
</body>
</html>





jsfiddle

最佳答案

请确实参考css代码,并确实检查图像路径是否正确。

#logo {
  background-image: url('/wzgorzeSmakowMarcin/logo/logoMedium.png');
  background-repeat: no-repeat;
  width: 431px;
  height: 146px;
  margin-left: 15px;
  background-size: contain;
  background-position: center center;
}

关于html - 无法在导航栏中显示徽标,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38788088/

10-10 11:49