当前位置：首页 > news >正文

Flask入门教程——李辉第四章静态文件关键知识梳理

news 2025/10/21 9:02:31

第四章静态文件关键知识梳理

文章目录

- 第四章静态文件关键知识梳理
- - 一个概念
  - 两类图片
  - - 1.网站头像
    - 2.网页图片
  - 层叠样式表(css)
  - 案例实现
  - - 创建静态文件夹
    - 添加网站头像
    - 添加网页图片
    - 添加样式文件(css)
    - `html`直接拿
  - 效果演示

一个概念

静态文件(static files) 和我们的模板概念相反，指的是内容不需要动态生成的文件。比如图片、CSS文件和JavaScripts脚本等。

两类图片

1.网站头像

Favicon 是显示在标签页和书签栏的网站头像。一般是像素为16X16、32X32、48x48或64X64的ico、png或gif格式的图片。

html 添加方法：head标签里 link标签

位置: ./static文件夹下

decos.ico

2.网页图片

为了让网页不太单调，一般都会在网页里添加一些图片。

位置：./static/images文件夹下

html添加方法：body标签里任意位置

层叠样式表(css)

CSS(Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言。

位置： ./static

使用：一般需要在html文件里引入css文件，并在需要修改样式的标签里添加class属性值，最后css通过cssclass选择器

案例实现

创建静态文件夹

mkdir static

添加网站头像

decos.ico
html文件添加如下：

<head>...<link rel="icon" href="{{ url_for('static',filename='dicos.ico')}}">
</head>

添加网页图片

先创建图片文件夹

mkdir static/images

avatar.png

totoro.gif

html文件添加如下：

<body><h2><img src="{{ url_for('static',filename='images/avatar.png')}}" alt="Avatar">{{ name }}'s Watchlist</h2>...<img src="{{ url_for('static',filename='images/totoro.gif')}}" alt="totoro">
</body>

添加样式文件(css)

html引入css文件

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

html标签添加class属性

    <h2><img src="{{ url_for('static',filename='images/avatar.png')}}" alt="Avatar" class="avatar">{{ name }}'s Watchlist</h2><ul class="movie-list">...</ul><img src="{{ url_for('static',filename='images/totoro.gif')}}" alt="totoro" class="totoro">

css样式文件

/* 页面整体 */
body {margin: auto;max-width: 580px;font-size: 14px;font-family: Helvetica, Arial, sans-serif;
}/* 页脚 */
footer {color: #888;margin-top: 15px;text-align: center;padding: 10px;
}/* 头像 */
.avatar {width: 40px;
}/* 电影列表 */
.movie-list {list-style-type: none;padding: 0;margin-bottom: 10px;box-shadow: 0 2px 5px 0 rgba(0, 0, 0,0.16),0 2px 10px 0 rgba(0, 0, 0, 0.12);
}.movie-list {padding: 12px 24px;border-bottom: 1px solid #ddd;
}.movie-list li:last-child {border-bottom: none;
}.movie-list li:hover {background-color: #f3f9fa;
}/* 龙猫图片 */
.totoro {display: block;margin: 0 auto;height: 100px;
}

`html`直接拿

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>{{ name }}'s Watchlist</title><link rel="icon" href="{{ url_for('static',filename='dicos.ico')}}"><link rel="stylesheet" href="{{url_for( 'static', filename='style.css') }}" type="text/css">
</head>
<body><h2><img src="{{ url_for('static',filename='images/avatar.png')}}" alt="Avatar" class="avatar">{{ name }}'s Watchlist</h2>{# 使用 length 过滤器获取 movies 变量的长度 #}<ul class="movie-list">{% for movie in movies %} {# 迭代movies 变量 #}<li>{{ movie.title }} - {{ movie.year }}{# 等同于 movie['title'] #}{% endfor %} {# 不要忘记endfor 来结束for语句 #}</li></ul><img src="{{ url_for('static',filename='images/totoro.gif')}}" alt="totoro" class="totoro"><footer><small>&copy; 2018 <a href="http://helloflask.com/tutorial">HelloFlask</a></small></footer>
</body>
</html>