时间戳

首页 > 解决方案 > HTML 和 CSS 照片未显示

html - HTML 和 CSS 照片未显示

问题描述

我目前正在学习 HTML、CSS 和 Javascript。我有个问题。我创建了一个简单的导航栏，在它上方，我试图显示您当前所在的页面以及作为徽标的照片。问题是照片显示为边框并且不会显示。

这是 HTML 代码：

This is the CSS code:

    body{
        top: 0px;
        margin: 0px;
    }
    nav {   
        width: 200px;
        height: 100%;
        background-color:#00bbbb ;
        position: absolute;
        overflow: hidden;
        left: 0px;
        top:40px;
        bottom: 0px;
    }
    
    a {
        display: table;
        text-decoration: none;
        border-top: 1px solid #03A2A2;
        color: white;
        font-size: 13px;
        width: inherit;
        left:0px;
    
    }
    
    .navbarText{
        color:black;
        font-size: 15px;
        top: 10px;
        position: relative;
        
    }
    
    .fas{
        position: relative;
        height: 36px;
        width: 70px;
        font-size: 18px;
        text-align: center;
        top:10px;
        color: #93f7f7;
    }
    
    
    
    a:hover{
        color:#fff;
        background-color: #fff;
    }
    
    .heads{ 
        background-color: #26c4c4;
        height: 40px;
        width: 100%;
        top: 0px;
        
        
    }
    
    
    .logo{
        position: relative;
        height: 30px;
        width: 30px;
        top: 5px;
    }
    .inline{
        display: inline;
    }
    <!DOCTYPE html>
    
    <html>
    
    </head>
    <title>Learnin</title>
    <link rel="stylesheet" type="text/css" href="style.css" </link>
    <script src="https://kit.fontawesome.com/7a7c16be39.js" crossorigin="anonymous"></script>
    </head>
    
    
    <body>
    
        <div class="heads">
            <h1 class="inline">Home</h1>
            <img class="logo inline" href="/Images/Header/logo.jpg"></img>
        </div>
    <nav>
        <a href="index.html">   
            <i class="fas fa-home"></i>
            <span class="navbarText">Home</span>
        </a>
        <a href="/Tabs/logbook.html">   
            <i class="fas fa-book"></i>
            <span class="navbarText">LogBook</span>
        </a>
        <a href="/Tabs/fleet.html">   
            <i class="fas fa-paper-plane"></i>
            <span class="navbarText">Fleet</span>
        </a>
    </nav>

    
    </body>  
    </html>

这就是网站的外观： 网站图片

标签： htmlcss

解决方案

你用过href，正确的属性是src，在这里了解更多，

<img class="logo inline" src="/Images/Header/logo.jpg"></img>

另外，请确保地址正确，有时可能是骗局，您可以打开您的网站，右键单击该元素并转到Inspect并检查地址是否与您期望的相同

推荐阅读