为什么CSS和HTML之间的链接不起作用？

Question

我正在使用atomic编辑器上的flask创建网站。在链接中，我指的是放置CSS文件的正确路径，而当我尝试加载页面时，仍然没有CSS。我尝试几次更改路径仍然无法正常工作。检查网页后，我发现找不到错误的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模板，对此感到抱歉。创建一个静态文件夹并将CSS文件放在其中之后，使用url_for函数将其放置在链接中，此问题已解决。我替换为：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 -->

我希望这会有所帮助。

Answer 3

尝试一下

 <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">

将其放入您的html文件中以访问CSS

为什么CSS和HTML之间的链接不起作用？

问题描述投票：-1回答：3

3个回答

最新问题

为什么CSS和HTML之间的链接不起作用？

问题描述 投票：-1回答：3

3个回答

最新问题

问题描述投票：-1回答：3