横幅未显示 CSS

Question

我有以下代码以我的 CSS 风格 sheet 显示横幅。

#banner {
    background-image: url(../Images/banner.png); 
    background-repeat: no-repeat;
    background-size: cover; 
    border: 5px solid #dedede;
    height: 200px;
}

横幅未显示。相反，我在左上角得到了一个白色的小立方体。

完整的 CSS 风格 sheet 是：

body {
    font-family: lucida grande,tahoma,verdana,arial,sans-serif;
    background-color: #e9e9e9;
}

body p {
    font-size: 0.8em;
    line-height: 1.28;
}

#wrapper {
    width: 1080px;
    background-color: #fff;
    margin: 0 auto;
    padding: 10px;
    border: 5px solid #dedede;
}

#banner {
    background-image: url(../Images/banner.png); 
    background-repeat: no-repeat;
    background-size: cover; 
    border: 5px solid #dedede;
    height: 200px;
}

#content_area {
    float: left;
    width: 750px;
    margin: 20px 0 20px 0;
    padding: 10px;
}

#sidebar {
    clear: right;
    width: 250px;
    height: 400px;
    margin: 20px 10px;
    padding: 10px;
    border: 2px solid #E3E3E3;
 }

footer {
    clear: both;
    width: auto;
    height: 40px;
    padding: 10px;
    border: 3px solid #E3E3E3;
    text-align: center;
    color: #fff;
    text-shadow: 0.1em 0.1em #333;
    background-image: url(../Images/banner.jpg);
}

#navigation {
    height: 60px;
    border: 3px solid #E3E3E3;
    margin-top: 20px;
    text-shadow: 0.1em 0.1em #333;
    background-image: url(../Images/footer.jpg);
}

#nav {
    list-style: none;
}

#nav ul {
    margin: 0;
    padding: 0;
    width: auto;
    display: none;
}

#nav li {
    font-size: 24px;
    float: left;
    position: relative;
    width: 180px;
    height: 50px;
}

#nav a:link, nav a:active, nav a:visited {
    display: block;
    color: #fff;
    text-decoration: none;
}

#nav a:hover {
    color: lightblue;
}

这是我的 HTML 代码：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title><?php echo $title; ?></title>
    <link rel="stylesheet" type="text/css" href="Styles/Stylesheet.css"/>
</head>
<body>
    <div id="wrapper">
        <div id=banner">
    </div>
    <nav id="navigation">    
         <ul id="nav">
             <li><a href="index.php">Home</a></li>   
             <li><a href="#">Books</a></li>
             <li><a href="#">Publications</a></li>    
             <li><a href="#">About Us</a></li>       
        </ul>   
    </nav>    
    <div id="content_area">
        <?php echo $content; ?>
    </div>
    <div id="sidebar"></div>
    <footer>
        <p>All rights reserved</p>
    </footer>
</body>
</html>

Answer 1

这就是我要做的： 1. 尝试做 background-repeat: repeat; ...看看会发生什么。 2. 右击小图，点击查看图片确认图片是否正确。 3. post html 为了更好的理解。

Answer 2

id属性值好像双引号错误

<div id=banner">

横幅未显示 CSS

Banner not displaying CSS

css

banner