如何写相对路径?

时间:2018-04-24 07:47:00

标签: html css path

我有两个文件夹。一个名为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">

6 个答案:

答案 0 :(得分:0)

将此信息包含在 html文件中: -

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

答案 1 :(得分:0)

您的 css js 文件夹应与应用位于同一目录中,然后index.html尝试css/style.css }

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

所以 app ,其中包含index.html,sass,img,现在还应该包含js和css文件夹。那肯定会有用。

如果保持文件目录不变,你应该明白。

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

答案 2 :(得分:0)

如果您同时使用两个文件夹&#39; app&#39;并且&#39;建立&#39;兄弟姐妹然后使用这个

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

答案 3 :(得分:0)

您应该将其更改为

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

您的index.html位于“app”文件夹中,而css位于“另一个文件夹”上,该文件夹与“app”文件夹具有相同的路径。因此,您需要首先使用“../”退出“app”文件夹,然后将其重定向到目标文件夹。如果你需要从目前的文件夹中退出,那么你将会是“../../your/destination/folder”,并且可以更多。

答案 4 :(得分:0)

<img src="picture.jpg">

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

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

picture.jpg位于当前文件夹中的images文件夹中

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

picture.jpg位于当前网络根目录的images文件夹中

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

picture.jpg位于距当前文件夹一级的文件夹中

答案 5 :(得分:0)

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

但请确保css文件真的可以访问。这取决于您使用的是Web服务器,使用的是哪种Web服务器,以及运行项目的起点是什么。

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

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

但不推荐使用上述方法。通常,您需要使用Web服务器来提供诸如js,css。

之类的静态文件

我建议你试试lite-server这是一个轻量级的网络服务器,让你可以通过访问像http://localhost:8000这样的东西来进行本地开发并立即检查你做了什么。< / p>

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

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

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

如果您不想添加&#34; app /&#34;该怎么办?访问index.html时?然后你可以将index.html移出app文件夹,直接进入项目的起点。这样,无论何时转到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),情况会有所不同。但核心原则很简单:确保可以访问所需的文件,并且您使用的相对路径实际上揭示了参考点和目标引用文件之间的路径关系。