徽标不会出现在引导程序导航栏上

我正在练习引导程序，并且在显示徽标时无法显示它。你能看看并解释发生了什么吗？徽标不会出现在引导程序导航栏上

的HTML5：

<!DOCTYPE html> 
<html class="responsive"> 
    <head> 
     <title>Whatcha Cravin? | Home</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" href="assets\css\style.css" type="text/css"> 
     <link rel="stylesheet" href="assets\css\bootstrap.css" type="text/css"> 
     <link rel="stylesheet" href="assets\css\bootstrap.min.css" type="text/css"> 
    </head> 
    <body> 
    <!-- Navbar --> 
     <nav class="nav"> 
      <div class="container"> 
       <div class="pull-left"> 
        <a href="#"> 
         <img href="assets/images/Logo_Transparent_Backround.PNG" class="image-responsive"> 
        </a> 
       </div> 
       <ul class="list-inline pull-right"> 
        <li class="list-unstyled"><a href="#" class="home">Home</a></li> 
        <li class="list-unstyled"><a href="#" class="menu">Our menu</a></li> 
        <li class="list-unstyled"><a href="#" class="about">About Us</a></li> 
        <li class="list-unstyled"><a href="#" class="contact">Contact Us</a></li> 
       </ul> 
      </div> 
      <div class="jumbotron"/> 
     </nav> 
    <!-- /Navbar --> 

    </body> 
</html>

这是我不明白，也许我的CSS是不正确的？

.nav li a{ 
    color: #000; 
    font-size: 15px; 
    font-weight: bold; 
    padding:14px 10px; 
    text-transform: uppercase; 
} 
.jumbotron{ 
    background-image:url(../images/image1-3-edited_1.jpg); 
    background-repeat:no-repeat; 
    background-size:cover; 
    height:599px; 
    margin-top:3px; 
    width:100%; 
} 
.nav li a:hover{ 
    background-color:#b23739; 
    color:#fff; 
} 
.nav{ 
    margin-top:10px; 
    width:100%; 
} 
.logo{ 
    height:100px; 
    width:200px; 
    margin-top:-100px; 
    overflow:none; 
} 
.list-inline{ 
    vertical-align:auto; 
}

来源

2015-03-13 Siyabonga Ridge Ngcobo

路径可能不会被分配到标志尝试在浏览器中调试。看看你是否有任何控制台错误？ – 2015-03-13 09:43:42

将href更改为img标签中的src。

来源

2015-03-13 09:47:09

非常感谢。有效！我无法相信我从来没有注意到那个。 – 2015-03-13 10:36:40

当调用需要使用

<img src="someImage.jpg" alt="" />

我已经改变了代码在这里小提琴的图像是更新

http://jsfiddle.net/ccedgLqy/

<body> 
<!-- Navbar --> 
    <nav class="nav"> 
     <div class="container"> 
      <div class="pull-left"> 
       <a href="#"> 
        <img src="http://www.xbox.com/shell/images/shell/XboxLogo.png" class="image-responsive"> 
       </a> 
      </div> 
      <ul class="list-inline pull-right"> 
       <li class="list-unstyled"><a href="#" class="home">Home</a></li> 
       <li class="list-unstyled"><a href="#" class="menu">Our menu</a></li> 
       <li class="list-unstyled"><a href="#" class="about">About Us</a></li> 
       <li class="list-unstyled"><a href="#" class="contact">Contact Us</a></li> 
      </ul> 
     </div> 
     <div class="jumbotron"/> 
    </nav> 
<!-- /Navbar --> 

</body> 

.nav li a{ 
color: #000; 
font-size: 15px; 
font-weight: bold; 
padding:14px 10px; 
text-transform: uppercase; 
} 
.jumbotron{ 
    background-image:url(../images/image1-3-edited_1.jpg); 
    background-repeat:no-repeat; 
    background-size:cover; 
    height:599px; 
    margin-top:3px; 
    width:100%; 
} 
.nav li a:hover{ 
background-color:#b23739; 
color:#fff; 
} 
.nav{ 
margin-top:10px; 
width:100%; 
} 
.logo{ 
    height:100px; 
    width:200px; 
    margin-top:-100px; 
    overflow:none; 
} 
.list-inline{ 
    vertical-align:auto; 
}

来源

2015-03-13 10:02:42 josh

徽标不会出现在引导程序导航栏上

回答

相关问题