為什么 CSS 和 HTML 之間的鏈接不起作用？

Question

我在 atom 編輯器上使用 flask 來創建網站。 在鏈接中，我指的是放置 CSS 文件的正確路徑，但當我嘗試加載頁面時，我仍然在沒有 CSS 的情況下得到它。 我嘗試了幾次更改路徑它仍然無法正常工作。 在檢查 web 頁面后，我注意到一個錯誤 404 文件未找到引用 CSS 文件，有什么想法嗎？ 下面是代碼：

<!DOCTYPE html>
<html>
  <head>
    <title>Flask App</title>
    <link rel="stylesheet"  href="/app4/css/main.css">
  </head>
  <body>
    <header>
      <div class="container">
        <h1 class="logo">Ardit's web app </h1>
        <strong><nav>
          <ul class="menu">
            <li><a href="{{ url_for('home') }}" > Home</a></li>
            <li><a href="{{ url_for('about') }}" > About</a></li>
          </ul>
        </nav></strong>
      </div>
    </header>
    <div class ="container">
      {%block content%}
      {%endblock%}
    </div>
  </body>
  </html>

Answer 1

我之前沒有提到我正在使用 flask 來創建網站，並且我正在渲染 html 模板，對此感到抱歉。 在創建 static 文件夾並將 CSS 文件放入其中后，問題得到解決，之后在使用 url_for function 的鏈接中工作。 我將： href="/app4/css/main.css 替換為： href="{{url_for('static', filename='css/main.css')}}" 就成功了。感謝您的幫助.

Answer 2

雖然我不知道哪個目錄是您正在運行它的 web 服務器的根目錄（這讓我很難給出一個具體的答案並確信它是正確的），但您可以嘗試一個相對路徑，例如：

<link rel="stylesheet"  href="./app4/css/main.css"> <!-- '/' changed to './' -->

如果您的服務器的根目錄是“app4”目錄，那么您可以嘗試

<link rel="stylesheet"  href="/css/main.css"> <!-- '/app4' removed -->

我希望這有幫助。

為什么 CSS 和 HTML 之間的鏈接不起作用？

問題描述

2 個解決方案

解決方案1
0 2020-06-01 19:24:57

解決方案2
-1 2020-06-01 18:24:24

為什么 CSS 和 HTML 之間的鏈接不起作用？

問題描述

2 個解決方案

解決方案1 0 2020-06-01 19:24:57

解決方案2 -1 2020-06-01 18:24:24

解決方案1
0 2020-06-01 19:24:57

解決方案2
-1 2020-06-01 18:24:24