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

Question

我正在尝试将我的 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 能够像我在计算机上一样正确连接。我不知道我做错了什么。

Answer 1

非常基本的答案，但是您没有考虑文件系统，而是考虑过将 CSS 放在 HTML 文件的样式标签中吗？

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

Answer 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

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

Answer 3

以 / 开始 link 创建一个绝对路径，从根文件夹开始，在本例中为 public_html.

我发现有时我在写相对路径时说出每个符号的作用会有所帮助。例如：

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

OP 试图 link 到带有 /css/style.css 的样式表。 / 表示转到根文件夹，即 public_html。由于 public_html 之后没有 css 文件夹，link 正在寻找一个据其所知不存在的文件夹。

如果想从 / 开始你的路径，那么 href 看起来像 /public_html_cgi_bin/css/style.css。

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

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

My first HostGator based website is not connecting html and css

html

css

hosting