python-flask 外链css,js样式加载图片

2019-07-24 本文已影响0人 Margolu

效果图如下：

js实现弹出警告框

js效果

用css为导航条添加样式，加载静态图片

css样式和图片

实现方法：

1.创建flask项目后，目录中会自动生成static,templates文件夹。我们在templates文件夹下创建html文件，在static文件夹下创建css,js,images三个文件夹。

2.右键js文件夹，创建javascript文件

index.js

在html文件的<head>标签中引用，这里用到url_for反转获取文件的路径，系统默认会去static文件夹下寻找js文件，所以在写filename时直接从自己创建的文件夹开始写起加上js名字

3.同理引用css样式，右键css文件夹，创建stylesheet文件

index.css

在head标签中用同样的原理引用

加载图片，在html文件body标签中，同样的方法填写路径

项目完整代码

app.py

index.html

index.css

index.js