我的第一个基于 HostGator 的网站没有连接 html 和 css答案

【问题标题】：My first HostGator based website is not connecting html and css我的第一个基于 HostGator 的网站没有连接 html 和 css
【发布时间】：2020-02-12 08:17:48
【问题描述】：

我正在尝试将我的 HTML 主页连接到我的 CSS 样式表。它可以在我的计算机上运行，但它似乎不适用于 Hostgator 服务器。我不知道我做错了什么。

我试着四处寻找答案，我想出了一个解决方案，即在 public_html 文件夹下为 CSS 创建一个子文件夹。我试过这样做，但似乎没有用。当我刷新页面时，它仍然是 HTML 文件的正常（非样式化）文本。这是我的网站：humanref.com。我还尝试将 HTML 路由到正确的位置，我认为我做得很成功，但它仍然无法正常工作。

这是文件组织在我的主机 gator 服务器上的外观：


-public_html
  -cgi_bin
  -css
    -style.css***
  -HumanRef
  -Default.html***

我想连接被盯着的。

---（注意：我还没有重新路由 UL，因为我想确保 css 正常工作。）----

下面列出的是名为 Default.html 的文件

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<nav>
<div class="topnav">
<ul>
    <li><a href="C:/Users/trevo/Desktop/Documents/GitHub/HumanRef/HumanRefrence/Pages/Home/Home2.html">Home</a></li>
    <li><a href="C:/Users/trevo/Desktop/Documents/GitHub/HumanRef/HumanRefrence/Pages/Explore/ExploreMain.html">Exlpore</a></li>
    <li><a href="C:/Users/trevo/Desktop/Documents/GitHub/HumanRef/HumanRefrence/Pages/How to Help/DonateYourFace.html">How To Help</a></li>
    <li><a href="C:/Users/trevo/Desktop/Documents/GitHub/HumanRef/HumanRefrence/Pages/About Us/about.html">About Us</a></li>
</ul>
</div>
</nav>
</body>
<link href="/css/style.css" rel="stylesheet" type="text/css" /></html>
<title>Welcome to HumanRefrence</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet" />
<div class="title">
<h1>Welcome to HumanRefrence</h1>

<p>Refrence the Diverstiy of Humanity</p>

<p><button class="button">Start Exploring</button></p>
</div>

<div class="Purpose">
<h2>This Sites Purpose</h2>

就像我之前说的，它显示为没有任何样式化的纯 HTML。我期望 HTML 和 CSS 能够正确连接，就像我在计算机上的连接方式一样。我不知道我做错了什么。

【问题讨论】：

作为一般说明，将主页命名为index.html 和<li> 是标准约定，我建议使用相对路径而不是绝对路径。此外，在声明 CSS 后，您有一个 </html>。

标签： html css hosting

【解决方案1】：

非常基本的答案，但不是弄清楚文件系统，您是否考虑过将 CSS 放在 HTML 文件的样式标签中？

<style>
   .box {
      color: green;
      border: 2px solid black;
    }
</style>

【讨论】：

【解决方案2】：

基本 HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <ul>
        <li><a href="pages/site1.html"></a></li>
        <li><a href="pages/site2.html"></a></li>
        <li><a href="pages/site3.html"></a></li>
        <li><a href="pages/subpage/subpage1.html"></a></li>
    </ul>
</body>
</html>

更多信息：Introduction to HTML

文件夹结构应该是这样的：

public_html
    index.html
    css
        style.css
    pages
        page1.html
        page2.html
        page3.html
        subpages
            subpage1.html

我建议使用相对路径而不是绝对路径。

【讨论】：

【解决方案3】：

以/ 开始链接会创建一个绝对路径，该路径从根文件夹开始，在本例中为public_html。

我发现有时我在编写相对路径时，说明每个符号在做什么会很有帮助。例如：

./ 是我所在的当前目录。
css/ 是我的文件夹。
style.css 是我文件夹中的文件。

OP 试图用/css/style.css 链接到样式表。 / 表示转到根文件夹，即public_html。由于在public_html 之后没有css 文件夹，因此该链接正在寻找据它所知不存在的文件夹。

如果想以/ 开始您的路径，那么href 将类似于/public_html_cgi_bin/css/style.css。

或者您可以只使用相对路径，您的 href 将是 ./css/style.css 或者更简单，css/style.css

【讨论】：