Question

我对编码有点新意，非常感谢我对我遇到的问题提供一些帮助。我正在尝试在div中引用一个图像，但是当我检查浏览器时，图像没有显示。我正在学习本教程：http://www.youtube.com/watch?v=j4kTLpezHDI&list=PL52E0F0A024E913AE。

的CSS：

.banner {
   background: url(../img/city-bg.jpg) no-repeat;
    width: 695px;
    height: 271px;
}

HTML：

    <!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Black + White</title>
    <link rel="stylesheet" type="text/css" "style.css">
</head>
<body>

<div class="container_12">
    <header>
    <h1>Black + White</h1>
    <nav>
        <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Our Services</a></li>
        <li><a href="#">How We Work</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Work Examples</a></li></ul>
    </nav>
    <div class="banner grid_10">
    <p>Some slick phrase would go in here to sum up what the business actually does and stands for.</p>
    </div>
    <div class="grid_2"></div>
</header>
<div class="main">
    <div class="grid_5">
        <h1>Services we offer</h1>
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        <p><a href="#" class="button">Read more</a></p>
    </div>
    <div class="grid_5">
        <h1>How we work</h1>
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        <p><a href="#" class="button">Read more</a></p>
    </div>
    <div class="grid_2">
        <blockquote>
            <p>Clean, elegant typography
            matched with sharp lines
            and precise spacing leads
            to a professional look
            and feel</p>
        </blockquote>
    </div>
</div>
<footer><p><strong>black+white themes via </strong><a href="http://themeforest.net">Themeforest</a></p></footer>
</div>

</body>
</html>

Answer 1

<link rel="stylesheet" type="text/css" "style.css">
--------------------------------------^------------

你错过了href：

<link rel="stylesheet" type="text/css" href="style.css">

starting with HTML + CSS

Answer 2

您可能在此处缺少链接标记中的 href 。

我强烈建议您使用元素浏览器检查工具来检查此类错误，它们易于使用，它们可以帮助您解决许多问题。在浏览器上下载，安装和使用代码元素检查工具：firebug for firefox，DragonFly for Opera，或使用Chrome的内置工具。您可以在HTML代码中转到该元素，并检查代码是否正确使用。您还可以即时进行临时HTML / JS / CSS更改以进行测试。这在Web开发中通常很有用，如果代码在浏览器中根据需要轻松执行或者对测试用例和事物进行更改，则可以检查代码。

Div背景图像不显示

2 个答案: