導航菜單背景丟失

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上只有“ header”，因此您需要更改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 個解決方案

解決方案1
0 已采納 2014-01-23 09:42:34

導航菜單背景丟失

問題描述

1 個解決方案

解決方案1 0 已采納 2014-01-23 09:42:34

解決方案1
0 已采納 2014-01-23 09:42:34