Question

问题是以下我制作了我的菜单 - 左侧有徽标，我几乎可以肯定代码是完美的，因为当我运行代码并点击导航菜单所在的地方时，它就是我的意思是一切都在它的位置，菜单是固定的....但菜单的背景图像没有出现所以这里是我的代码

HTML：

</head>
<body>
    <div id="header">
        <ul>
            <li><a href="index.html" class="logo"></a></li>
            <li><a href="index.html" class="home"></a></li>
            <li><a href="Sugestology.html" class="sugestology"></a></li>
            <li><a href="TheCreator.html"  class="creator"></a></li>
            <li><a href="InBulgaria.html" class="inbulgaria"></a></li>
            <li><a href="Contacts.html" class="contacts" ></a></li>
        </ul>
    </div>

CSS：

#header {
    position: fixed;
    top: 0;
    height: 80 px;
    width:100%;
    z-index:500;
}
#header ul {
    padding-left: 0;
    height: 80px;
}
#header li {
    list-style: none;
    float: left;
    height: 80px;
    width: 16.6%;
}
#header li a {
    display: inline-block;
    width: 100%;
    height: 80px;
    background-size: cover; 
}
ul#header li a.logo {background: url("C:\Users\N\Desktop\Sugestology\nav_01.jpg") no-repeat 0 0}
ul#header li a.home {background: url("C:\Users\N\Desktop\Sugestology\nav_02.jpg") no-repeat 0 0}
ul#header li a.sugestology       {background:url("C:\Users\N\Desktop\Sugestology\nav_03.jpg") no-repeat 0 0} 
ul#header li a.creator {background: url("C:\Users\N\Desktop\Sugestology\nav_04.jpg") no-repeat 0 0}
ul#header li a.inbulgaria {background: url("C:\Users\N\Desktop\Sugestology\nav_05.jpg") no-repeat 0 0}
ul#header li a.contacts {background: url("C:\Users\N\Desktop\Sugestology\nav_06.jpg") no-repeat 0 0}

我已经尝试了几种方法来链接图像，尽管它们在sam文件夹中作为css文件和html文件））

Answer 1

从图像中删除绝对路径。相反，这样做（假设所有内容都在同一文件夹中，根据您的问题）：

ul#header li a.logo {background: url("nav_01.jpg") no-repeat 0 0}
ul#header li a.home {background: url("nav_02.jpg") no-repeat 0 0}
ul#header li a.sugestology {background:url("nav_03.jpg") no-repeat 0 0} 
ul#header li a.creator {background: url("nav_04.jpg") no-repeat 0 0}
ul#header li a.inbulgaria {background: url("nav_05.jpg") no-repeat 0 0}
ul#header li a.contacts {background: url("nav_06.jpg") no-repeat 0 0}

我还建议将图像放在一个单独的文件夹中 - 有助于整理一切！

<强>更新：

您还在CSS中使用ul#header，但您没有ID为“header”的UL。 div上只有“标题”，因此您需要更改CSS以在UL上使用不同的ID。或者，按如下方式更改CSS：

#header ul li a.logo {background: url("nav_01.jpg") no-repeat 0 0}
#header ul li a.home {background: url("nav_02.jpg") no-repeat 0 0}
#header ul li a.sugestology {background:url("nav_03.jpg") no-repeat 0 0} 
#header ul li a.creator {background: url("nav_04.jpg") no-repeat 0 0}
#header ul li a.inbulgaria {background: url("nav_05.jpg") no-repeat 0 0}
#header ul li a.contacts {background: url("nav_06.jpg") no-repeat 0 0}

缺少导航菜单背景

1 个答案: