CSS无法加载到HTML文件中。尝试加载allmight图像，但没有成功，flexbox也无法加载。我是否应该将其作为内联CSS，我希望保持它的独立性。有什么建议吗？我可以改进代码吗？

<!DOCTYPE html>
<html lang="de">
<head>
    <link rel="stylesheet" href="/CSS/Flexbox.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox</title>
</head>
<body>
    <div id="körper">
        <div id="anzeige">
            <div id="logosuche">
                <div id="logo">
                    <div id="symbol"></div>
                    <div id="name"></div>
                </div>
                <div id="suche">
                    <div id="g_logo"></div>
                    <div id="eingabefeld">
                        <input id="eingabe" type="text" value="Search with Google or enter address">
                    </div>
                </div>
            </div>
            <div id="icons">
                <div class="hover" id="umbruch1"><div class="icon"><img src="/Website_Images/allmight.png.png" alt="1" width="40px"><span>All Might</span></div></div>
                <div class="hover" id="umbruch2"><div class="icon"><img src="fortnite.png" alt="2" width="40px"><span>Donnerstag</span></div></div>
                <div class="hover" id="umbruch3"><div class="icon"><img src="fortnite.png" alt="3" width="40px"><span>Access</span></div></div>
                <div class="hover" id="umbruch4"><div class="icon"><img src="fortnite.png" alt="4" width="40px"><span>schmarn</span></div></div>
                <div class="hover" id="umbruch5"><div class="icon"><img src="fortnite.png" alt="5" width="40px"><span>i bin a bayer</span></div></div>
                <div class="hover" id="umbruch6"><div class="icon"><img src="fortnite.png" alt="6" width="40px"><span>pornos</span></div></div>
                <div class="hover" id="verschwinden1"><div class="icon"><img src="fortnite.png" alt="7" width="40px"><span>8 Euro</span></div></div>
                <div class="hover" id="verschwinden2"><div class="icon"><img src="fortnite.png" alt="8" width="40px"><span>spam</span></div></div>
            </div>
        </div>
    </div>
</body>
</html>

CSS文件供参考，文件名仅为“Flexbox”

body {
    margin: 0;
    padding: 0;
    display: flex;
    min-height: 100vh;
    --background-color: rgb(229, 219, 246);
    --background-color-secondary: rgba(255, 255, 255, 1);
    --text-primary-color: rgba(0, 0, 0, 1);
}

#körper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--background-color);
}

#anzeige {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#logosuche {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#logo {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#symbol {
    height: 82px;
    width: 82px;
    background: url('logo.png') no-repeat center;
    background-size: 82px;
}

#name {
    height: 82px;
    width: 134px;
    background: url('name.svg') no-repeat center center;
    background-size: 134px;
    margin: 20px;
}

#suche {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: white;
    height: 50px;
    width: 725px;
    margin-top: 30px;
    border-radius: 10px;
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
}

#g_logo {
    height: 30px;
    width: 30px;
    background: url('g_logo.svg') no-repeat center center;
    background-size: 20px;
    margin-right: 15px;
}

#eingabefeld {
    height: 25px;
    width: 650px;
}

#eingabe {
    width: 100%;
    height: 100%;
    border: none;
    font-family: Arial;
    font-size: 16px;
    font-weight: lighter;
    color: grey;
}

#icons {
    display: flex;
    width: 1000px;
    max-width: calc(100% - 25px);
    flex-wrap: wrap;
    justify-content: center;
}

.hover {
    display: flex;
    margin-top: 70px;
    height: 140px;
    width: 120px;
    border-radius: 10px;
}

.hover:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.icon {
    height: 80px;
    width: 80px;
    margin: 20px; 
    background-color: white;
    border-radius: 10px;
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
}

span {
    display: block;
    text-align: center;
    font-size: 12px;
    font-family: Arial;
}

img {
    margin: 20px;
}

input {
    outline: none;
}

@media screen and (max-width: 800px) {
    
    #suche {
        width: 625px;
    }

    #g_logo {
        margin-left: 10px;
    }

    #eingabefeld {
        width: 550px;
    }

}

@media screen and (max-width: 650px) {
    
    #suche {
        width: 525px;
    }

    #g_logo {
        margin-left: 20px;
    }

    #eingabefeld {
        width: 450px;
    }

}

@media screen and (max-width: 550px) {
    
    #suche {
        width: 325px;
    }

    #g_logo {
        margin-left: 10px;
    }

    #eingabefeld {
        width: 250px;
    }

}

预期CSS文件与图像和Flexbox协作并加载结构

3条答案

按热度按时间

t1qtbnec1#

尝试删除链接中的第一个斜杠

<link rel="stylesheet" href="CSS/Flexbox.css">

赞(0）回复(0）举报 2023-03-20

ecbunoof2#

HTML文件采用以下目录结构：

index.html
CSS
 \_ Flexbox.css
Website_Images
 \_ allmight.png.png

HTML文件的CSS文件夹和Website_Images都在你的Web服务器的webroot中。如果你不使用服务器，直接打开HTML文件，它将使用文件系统根目录（Linux上的/，Windows上的C:/）
还要确保文件扩展名都是正确的，正如尼科指出，确保文件名为“Flexbox.css”而不是“Flexbox”没有文件扩展名，也“allmight.png.png”似乎可疑

9rbhqvlz3#

在将文件链接到HTML之前，请仔细检查文件。
如果“css”文件与当前页面位于同一文件夹中请使用此-：flexbox.css
如果“css”文件位于当前文件夹中的images文件夹中，请使用以下命令：- Css/flexbox.css
如果“css”文件位于当前站点根目录下的images文件夹中。
使用此文件：-/css/flexbox. css
如果“css”文件位于当前文件夹的上一级文件夹中，请使用：- ..flexbox.css我希望这可以帮助您处理css文件、js文件和图像。谢谢

当链接正确时不会加载CSS结构，我做错了什么？

3条答案

相关问题

热门标签

最新问答