Question

您好我是一名新手程序员而且我正在制作我的第一个网站。我正在Mac上工作，每当我直接从finder预览文件时，我的CSS和图像即使路径正确也不会显示。当我在Dreamweaver CS6和Brackets中预览文件时，视线看起来完全是我想要的，但不是在我选择直接从文件中预览时。这是CSS和HTML文件。任何建议将不胜感激。谢谢。这是Here

的截图

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

#menuBar{
    position: fixed;
    width: 100%;
    top: -10px;
    right: 0px;
    z-index: 2;
}

#logo {
    position: fixed;
    z-index: 3;
    right:1100px;
}

#menuButton, #aboutButton, #locationButton, #cateringButton{
    position: fixed;
    z-index: 4;
    color: white;
    font-family:Futura;
    font-size:10px;
    top:30px;
}

#menuButton {
    right:610px;
}

#aboutButton {
    right:475px;
}

#locationButton{
    right:308px;
}

#cateringButton{
    right:150px;
}

#facebookButton{
    right:60px;
    top:40px;
    position: fixed;
    height:40px;
    width: 50px;
    z-index:5;
}

<!DOCTYPE HTML>
<html>
<body>
<link href="Roundhouse/CSS/homePage.css" type="text/css" rel="stylesheet" />

<div id="menuBar"><img src="Roundhouse/Images/MenuBar.png" alt="menu Bar" width="100%" height="125px" />
    </div>
<div id="logo">
<img src="Roundhouse/Images/Round-House.gif" alt="logo" width="100px" height="100px" /></div>

<div id="menuButton">
    <h1>MENU</h1>
    </div>
<div id="aboutButton">
    <h1>ABOUT</h1>
    </div>
<div id="locationButton">
    <h1>LOCATION</h1>
    </div>
<div id="cateringButton">
    <h1>CATERING</h1>
    </div>
<div id="facebookButton">

<a href="https://www.facebook.com/RoundhouseBBQ/?rf=205148012847894" target="_blank"> <img src="Roundhouse/Images/facebooklogo.png" border="0" alt="facebook" height="30px" width="30px" >
</a>
</div>

</body>

</html>

Answer 1

如果文件夹RoundHouse位于html文件旁边，请检查路径是否正确。

如果这不起作用，请尝试使用绝对路径并尝试包含file://。更好的方法是启动本地http服务器并将html和图像文件放在那里。

Answer 2

我了解您的网站文件夹结构如下：

/Roundhouse{root-folder}
    /Images
    /CSS
    index.html

如果index.html或任何根HTML文件位于我认为的那样，那么你应该删除额外的＆＃34; Roundhouse /＆＃34;来自所有路径的子路径。因为从目标HTML文件（index.html）内部开始，您应该开始相对于其位置访问文件。

因此，例如，根据上述结构，如果您在Images文件夹中有back.png图像，则可以显示如下：

<img src="Images/back.png">

希望这会有所帮助。尝试阅读有关HTML / CSS文件遍历的更多信息：

http://www.itechflare.com/main/html-css-file-path-quick-tips/

由于

从文件

2 个答案: