Question

我正在尝试为培训目的做一个简单的网站，以便进入一些更高级的CSS。但是，我遇到了一个问题，因为没有url（）图像显示出来。

以下是HTML代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de" />
<head>
    <title>Mark in Japan</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
</head>
<body>
<div id="wrap">
    <header>
        <h1>Mark in Japan</h1>
    </header>

    <nav>
        <ul>
            <li> <a class="active" title="home" href="#">Home</a></li>
            <li><a title="reisenotizen" href="#">Reisenotizen</a></li>
            <li><a title="essen" href="#">Essen</a></li>
            <li><a title="medien" href="#">Medien</a></li>
            <li><a title="japan" href="#">&Uuml;ber Japan</a></li>
        </ul>
    </nav>

    <section>
        <article>
        <h2>Blog-&Uuml;berschrift</h2>
            <p>Lorem ipsum dolor sit amet...</p>
        </article>
    </section>
    <aside>
        <h3>&Uuml;berschrift Seitenleiste</h3>
        <ul>
            <li>List Content</li>
            <li>List Content</li>
            <li>List Content</li>
        </ul>
    </aside>
    <footer>
        <p>Copyright &copy;2016 Mark in Japan, alle Rechte vorbehalten.</p>
    </footer>
</div>
</body>
</html>

以下是CSS：

body { 
margin: 0;
padding: 0;
background: #026dc0 url('../bilder/bg.gif') repeat-x top;
font-family: Helvetica, sans-serif;
line-height: 1.4em;
}

h1, h2, h3, p, ul, li {
    margin: 0;
    padding: 0;
}

p, h2, h3 {
    margin: 0 0 10px 0;
}

ul {  
list-style-type: none;
}

#wrap {
    margin: 0 auto; 
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 10px; 
    width: 780px; 
    background: #fff;
    border: 10px solid #044375;
}

header {
    background: url('../bilder/insel.jpg') no-repeat;
    height: 250px;
}

header h1 { 
    padding: 30px 0 30px 30px; 
    color: #fff; 
    background: url('../bilder/dot.png') no-repeat 10px 50%;
    font-weight: normal; 
    letter-spacing: -1px; 
}

nav {
    margin: 10px 0 0 0;
    padding: 10px; 
    background: #044375;
    border-top: 5px solid #033761; 
}

nav ul li { 
    display: inline;
    margin: 0 10px 0 10px; 
}

nav a {
    color: #fff; 
}

section { 
    margin: 10px 0 0 0;
    padding: 10px;
    float: left;
    width: 505px; 
}

aside {
    margin: 10px 0 0 0;
    padding: 10px;
    float: right;
    width: 225px; 
}

aside ul {
    margin: 0 0 40px 0; 
}

aside h3 {
    padding: 5px; 
    background: #eee;
    border-bottom: 2px solid #ddd;
    font-weight: normal;
}

footer {
    clear: both;
    background: #eee;
    border-bottom: 2px solid #ddd;
}

我已经完成了所有代码，正如我给出的练习所提供的那样。我还通过CSS和HTML验证运行代码。它们完全没有错误地通过，但图像没有显示出来。

我已将<header>元素更改为<div>元素，分配了ID并尝试将图像从文件夹移动到页面根目录，以查看是否有任何区别，但它没有无济于事。

如果您有任何建议，想法等，我会非常高兴。

提前致谢。

Answer 1

通过OP添加comment作为答案。

为空元素添加height和width可能会解决此问题。尝试一下。

没有维度

<div>和<header>等元素不占用空间，因为它们是空的，并且您使用background-image作为CSS。

div {background: url("//placehold.it/500x100?text=Hello") center center no-repeat;}
header {background: url("//placehold.it/500x100?text=Hello") center center no-repeat;}

<div></div>
<header></header>

使用尺寸

<div>和<header>等元素只需height，因为默认情况下，它们会占用width。

div {background: url("//placehold.it/500x100?text=Hello") center center no-repeat; height: 100px;}
header {background: url("//placehold.it/500x100?text=Hello") center center no-repeat; height: 100px;}

<div></div>
<header></header>

这是导致您出现问题的问题。

图像的HTML / CSS问题

1 个答案: