动态的 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 %}
© Copyright 2020.
{% endblock %}
</div>
</body>
</html>
```
再次访问我们的应用程序,背景色就被改变了。
![样式颜色](https://img.kancloud.cn/87/a4/87a46b69d08b15c26ae1cd6b3cbc9ca2_523x125.png)