应用程序没有拿起.css文件(flask/python)

我正在渲染一个模板,我试图用外部样式表进行风格化。文件结构如下。
/app
    - app_runner.py
    /services
        - app.py 
    /templates
        - mainpage.html
    /styles
        - mainpage.css

mainpage.html看起来像这样

<html>
    <head>
        <link rel= "stylesheet" type= "text/css" href= "../styles/mainpage.css">
    </head>
    <body>
        <!-- content -->

我的风格都没有被应用。这是否与html是我呈现的模板有关? python看起来像这样。

return render_template("mainpage.html",variables..)

我知道这很有用,因为我仍然可以渲染模板。然而,当我尝试将我的样式代码从html的“head”标签中的“样式”块移动到外部文件时,所有的样式都会消失,留下一个裸机页面。任何人看到我的文件结构有任何错误

解决方法

您需要有一个“静态”文件夹设置(对于css / js文件),除非您在Flask初始化期间专门覆盖它。我假设你没有覆盖它。

你的css的目录结构应该是:

/app
    - app_runner.py
    /services
        - app.py 
    /templates
        - mainpage.html
    /static
        /styles
            - mainpage.css

请注意,您的/ styles目录应该在/ static下

然后,这样做

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

Flask现在将在static / styles / mainpage.css下查找css文件

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效