为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

冉冉说 2023-10-30 21:00:32
我的所有 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>-- 主.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有问题?谢谢你!
查看完整描述

1 回答

?
侃侃尔雅

TA贡献1801条经验 获得超15个赞

我认为这里的问题出在你的服务器上,我假设你正在使用FlaskJinja语法,因为你在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")

"static"所以现在 Flask 会在你需要创建它的文件夹中查找你的静态文件,然后将你的静态文件放在那里,包括你的 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"当然你可以更改任何你不喜欢的名称,但请确保去照顾。


查看完整回答
反对 回复 2023-10-30
  • 1 回答
  • 0 关注
  • 74 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信