🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
动态的 web 应用也需要静态文件,一般是 CSS 和 JavaScript 文件。 理想情况下静态资源有单独的服务提供静态文件的服务,但是 Flask 也能做好 这项工作。只要在包或模块旁边创建一个名为 `static` 的文件夹就行了。 静态文件位于应用的 `/static` 中。 ``` root@airvip:~/python_app/flask-demo# cd app && mkdir static ``` 在 `static` 目录下新建 `html`,`css`,`js`,`img`,并在 `css` 目录下新建 `style.css` `html` 存放 html 资源 `css` 存放 css 资源 `js` 存放 js 文件 `img` 存放图片资源 在 `style.css` 文件中录入一下内容,改变下背景色 ``` body { background-color: #b4d7f3; } ``` 比如:我们模板文件中需要引入样式 在 `app/templates/api` 目录下新建 `base.html` ,录入如下代码 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> {% block head %} <title>{% block title %}{% endblock %}-Flask</title> <link rel="stylesheet" type="text/css" href=" {{ url_for('static', filename='css/style.css') }}"> <style> #main-color {color: #ff0000;} </style> {% endblock %} </head> <body> <div id="content">{% block content %}{% endblock %}</div> <div id="footer"> {% block footer %} &copy; Copyright 2020. {% endblock %} </div> </body> </html> ``` 再次访问我们的应用程序,背景色就被改变了。 ![样式颜色](https://img.kancloud.cn/87/a4/87a46b69d08b15c26ae1cd6b3cbc9ca2_523x125.png)