Question

我想将导航栏和徽标叠加在同一横幅图片上。看起来应该是这样的：

enter image description here

这是我粗制滥造的HTML：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css">
<title>Banner and Navigation menu</title>
</head>

<body>
    <div id="header-container">
        <div id="header">
            <div id="logo">
            <a href="#"><img src="Logo.png" /></a>
            </div>
            <div id="nav">
            <ul>
                <li><a href="#"><img src="Nav menu Comic.jpeg" alt="home" /></a></li>
                <li><a href="#"><img src="Nav menu mashups" alt="about" /></a></li>
                <li><a href="#"><img src="Nav menu store" alt="services" /></a></li>
                <li><a href="#"><img src="images/products.png" alt="products" /></a></li>
                <li><a href="#"><img src="images/contact.png" alt="contact" /></a></li>
            </ul>
            </div>
        </div>
    </div>
</body>
</html>

我的css：

    @charset "utf-8";
@charset "utf-8";
/* CSS Document */

body {
    margin: 0px;
    padding: 0px;
}

#header-container {
    width: 100%;
    height: 204px;
    background-color: #0071b2;
}

#header {
    background-image:  <img src= homepage url(../Website%20pictures/homepage%20banner.jpg)> </img> ;
    background-repeat: no-repeat;
    width: 1024px;
    height: 204px;
    margin: auto;
}

#logo {
    float: right;
    padding-right: 170px;
    padding-top: 35px;
}

img {
    border: none;
}

#nav {
    height: 76px;
    width: 1024px;
    padding-top: 152px;
    padding-left: 158px;
}

#nav ul
{
    text-align: left;
    margin: auto;
    width: 1024px;
}

#nav ul li
{
    display: inline;
    padding: 0px;
    margin: 0px;
}/* CSS Document */

我一直在努力让我的背景图像显示出来。

Answer 1

要使背景图像正常工作，您需要更改背景图像属性。

错：

background-image:  <img src= homepage url(../Website%20pictures/homepage%20banner.jpg)> </img> ;

正确：

background-image: url("../Website pictures/homepage banner.jpg");

顺便说一下，在文件名中使用空格不是一个好习惯。请考虑改为使用../Website-pictures/homepage-banner.jpg。

Answer 2

只需要将nav ul + li重命名为logo ul + li。

如何在同一个div中包含导航栏，横幅和徽标

2 个答案: