如何写相对路径?



我有两个文件夹。一个叫做app,它包含index.html,sass,img。第二个使用文件夹构建:css,js。我应该在 index.html 中键入什么路径来访问 style.css 文件,该文件位于 build/css/style 中.css ?我试过这个,但它不起作用。

<link rel="stylesheet" type="text/css" href"build/css/style.css">

您的cssjs文件夹应该与index.html所在的应用程序位于同一目录中,然后尝试css/style.css

<link href="css/style.css" rel="stylesheet">

所以包含index.html,sass,img的应用程序现在也应该包含js和css文件夹。那么它绝对应该有效。

如果保持文件目录不变,您应该了解。

*从/开始返回到根目录并从那里开始,然后../向后移动一个目录并从那里开始,依此类推../../。在这种情况下<link href="../build/css/style.css" rel="stylesheet">应该有效。

将其包含在您的html 文件中:-

<link rel="stylesheet" type="text/css" href="../css/style.css">

如果您的文件夹"app"和"build"都是兄弟姐妹,请使用这个

<link rel="stylesheet" type="text/css" href="../build/css/style.css"> 

你应该把它改成

<link rel="stylesheet" type="text/css" href"../build/css/style.css">

您的索引.html位于"应用程序"文件夹上,而css位于与"应用程序"文件夹具有相同路径的"另一个文件夹"上。因此,您需要先使用"../",然后将其重定向到目标文件夹。如果您需要从当前文件夹中取出,则会出现两次,就像"../../你的/目的地/文件夹",还可以更多。

<img src="picture.jpg">

图片.jpg 与当前页面位于同一文件夹中

<img src="images/picture.jpg">  

图片.jpg位于当前文件夹的"图像"文件夹中

<img src="/images/picture.jpg"> 

图片.jpg位于当前 Web 根目录下的"图像"文件夹中

<img src="../picture.jpg">

图片.jpg位于比当前文件夹上一级的文件夹中

相对路径相对于放置引用的文件在您的情况下,style.css位于build/文件夹中,该文件夹位于涵盖index.html的应用程序文件夹旁边。因此,如果要从index.html中引用样式.css通常应该使用相对路径.。/build/css/style.css.

但是请确保 css 文件确实可以访问。这取决于您是否正在使用 Web 服务器、您使用的 Web 服务器以及运行项目的起点是什么。

如果您只是打开索引.html通过单击文件资源管理器中的文件,那么您可以使用它来使样式.css工作:

<link rel="stylesheet" href="../build/css/style.css">

但是,不建议使用上述方法。通常,您需要使用Web服务器来提供诸如js,css之类的静态文件。

我建议您尝试精简服务器,这是一个轻量级的Web服务器,可让您进行本地开发,并通过访问 http://localhost:8000 之类的内容立即检查您已经完成的工作。

当您使用 Web 服务器提供静态文件时,请确保从已经涵盖应用程序和构建文件夹的起点开始运行它(这样您所需的所有文件都可以访问),例如,使用这两个文件夹的父文件夹。如果是这样,当您要打开index.html时,您将访问类似 http://localhost:8000/app/index.html 的内容(因为index.html位于app/文件夹下,您需要添加"app/")。应用此布局时,您至少有两种插入 css 行的方法:

<link rel="stylesheet" type="text/css" href="../build/css/style.css">

<link rel="stylesheet" type="text/css" href="/build/css/style.css">

如果您不想在访问索引时添加"app/".html怎么办?然后,您可以将索引.html从应用程序文件夹中移出,直接移动到项目起点。这样,每当您转到 http://localhost:8000 时,通常 index.html 都会被假定为已送达。(就像访问 http://localhost:8000/index.html 一样)。当您使用该方法运行项目时,对 style.css 的引用就是您所做的方式,即:

<link rel="stylesheet" type="text/css" href="build/css/style.css">

顺便说一下,在这种情况下,这也很好,具有绝对路径:

<link rel="stylesheet" type="text/css" href="/build/css/style.css">

如果您使用其他机制来提供静态文件(如 css、js),情况会有所不同。但核心原则就是这么简单:确保可以访问所需的文件,并且您使用的相对路径确实揭示了参考点和目标参考文件之间的路径关系。

相关内容

  • 没有找到相关文章

最新更新