Fatal编程技术网
  • html/
  • Html 样式表的相对链接在本地计算机上不起作用，可以在线工作。为什么会这样？

Html 样式表的相对链接在本地计算机上不起作用，可以在线工作。为什么会这样？

html css

Html 样式表的相对链接在本地计算机上不起作用，可以在线工作。为什么会这样？,html,css,stylesheet,rel,Html,Css,Stylesheet,Rel,我正在尝试将我的样式表（styles.css）链接到index.html。当我使用Chrome的Sublime Text build函数进行此操作时，HTML显示良好，但没有链接到样式表（文本不是蓝色）。当我将完全相同的代码（在相同的文件夹结构中）上传到BitBalloon时，链接就起作用了。这是为什么？我如何使链接在这两种情况下都工作 index.html： <!DOCTYPE HTML> <html> <head> <title>I t

我正在尝试将我的样式表（styles.css）链接到index.html。当我使用Chrome的Sublime Text build函数进行此操作时，HTML显示良好，但没有链接到样式表（文本不是蓝色）。当我将完全相同的代码（在相同的文件夹结构中）上传到BitBalloon时，链接就起作用了。这是为什么？我如何使链接在这两种情况下都工作

index.html：

<!DOCTYPE HTML>
<html>
<head>
    <title>I think I'm doing this right!</title>
    <link rel="stylesheet" type="text/css" href="/css/styles.css" />
</heaod>
<body>
    <div class="jumbotron">
      <div class="container">
        <h1>CareerFoundry Template</h1>
        <p style="background-color: red;">This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more &nbsp;&amp;&nbsp; unique.</p>
        <p><a class="btn btn-primary btn-lg" role="button">Learn more &raquo;</a></p>
      </div>
    </div>
</body>
</html>


我想我做得对！
CareerFoundry模板
这是一个简单的营销或信息网站的模板。它包括一个称为jumbotron的大型标注和三个支持内容。把它作为一个起点来创造更多的东西&；独一无二


在标准设置中，您的联机根目录设置为public_html（或www）

第一部分：

/css/styles.css

告诉是查看项目的根“/”并从那里开始。在您的计算机上，它使用“/”作为计算机的根目录

如果css文件夹与包含html文件的目录相同，那么只使用“css/styles.css”可能会起作用


否则，您可以运行一个本地web服务器，例如它将允许您在本地计算机上拥有一个公共html文件夹作为根目录。
当您使用/像/css/styles.css那样启动一个路径时，您告诉浏览器查看您正在查看的URL，取其基础部分并附加/css/styles.css

当您的站点托管在BitBalloon上时，URL的基础是shopper-cnythia-30345.BitBalloon.com，样式表的完整路径变为

当您在本地查看文件时，URL可能类似于file:///Users/mbc/Documents/html-sites/html5up-aerial-在这种情况下，没有基本域，因此浏览器最终会查找文件：file://css/styles.css这是不存在的

有两种方法


  • 使用真正的相对路径，如css/styles.css。这会告诉浏览器获取您所在的目录并附加css/styles。这样做的缺点是，如果您的浏览器位于/about/index.html这样的子页面上，您必须小心，因为浏览器将尝试获取/about/css/styles.css，您需要链接到。/css/styles.css，才能绕过这个问题
    • 

  • 使用绝对路径并运行本地web服务器。这是一个非常好的列表，其中包括
将允许您从目录中的命令行启动一个简单的web服务器：，这保证您的站点在本地查看和部署到BitBalloon时的行为方式相同
    • 

    我建议您习惯于运行本地web服务器。一旦您开始更多地使用Javascript、Ajax请求等，它就成为了一种必要。检查控制台，如果无法访问资源，您将在那里看到错误。您的目录结构是什么？顶级文件夹（根目录，如果这是正确的术语）是“HTMLandCSSBasics”。HTMLandCSSBasics中包含HTML文档和一个名为“css”的文件夹。css内部是“styles.css”