Html 文件没有与我的 css 文件一起下沉？

Question

我所有的 html 和 css 和文件都在同一个模板文件夹中，所以我认为这不是问题所在。我是前端开发的新手，非常困惑...请帮忙，这不是一个好的开始哈哈！

-- 我的 base.html 文件 --

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
    <nav class="navigation_bar">
        <ul>
            <li>
                <a href="/about"><b>about page</b></a>
            </li>
        </ul>
    </nav>
    {% block content %}{% endblock %}
</body>
</html>

-- main.css --

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600');

body {
    text-align: center;
    font-family: 'Montserrat';
}



.navigation_bar a {
    text-decoration: none;
}

可能是我的 css 的问题？谢谢！

Answer 1

我认为这里的问题出在你的服务器上，我假设你正在使用 Flask 因为你在你的 html 文件中编写 Jinja 语法，我认为问题是 Flask 不能找到您的 css 文件。你需要准确地告诉它在哪里寻找你的静态文件，或者你可以做一个路由器来处理文件请求，读取文件并将它们发送回浏览器。

第一种方式

from flask import Flask, render_template

app = Flask(__name__,
            static_url_path='', 
            static_folder='static',
            template_folder='templates')

@app.route('/')
def main_page():
  return render_template("index.html")

所以现在 Flask 将在文件夹 "static" 中查找您的静态文件，您需要创建它，然后将您的静态文件放在那里，包括您的 css 文件，并留下您的 html 文件，不要更改 css 文件的路径以包含文件夹名称，因为 Flask 会像在脚本的当前目录中一样提供它。

第二种方式

from flask import Flask, render_template, request, Response

app = Flask(__name__)

@app.route('/')
def main_page():
  return render_template("index.html")

@app.route('/css')
def giveCSS():
  fileContent = ""
  file_name = request.args.get("name")
  if(file_name):
    file = open("css/" + file_name + ".css", "r")
    for line in file:
      fileContent += line
  return Response(fileContent, mimetype='text/css')

我假设您还有其他 css 文件，您需要更改 html 文件中 css 文件的路径以包含查询 /css/name=main 和css 文件可能是一个名为 "css" 的文件夹，当然你可以更改任何你不喜欢的名称，但一定要小心。

Html 文件没有与我的 css 文件一起下沉？

Html file isn't sinking up with my css file?

html

css

frontend

web-frontend