第四章 静态文件 关键知识梳理
文章目录
-
- [第四章 静态文件 关键知识梳理](#第四章 静态文件 关键知识梳理)
一个概念
静态文件(static files) 和我们的模板概念相反，指的是内容不需要动态生成的文件。比如图片、CSS文件和JavaScripts脚本等。
两类图片
1.网站头像
Favicon 是显示在标签页和书签栏的网站头像。一般是像素为16X16、32X32、48x48或64X64的ico、png或gif格式的图片。
html 添加方法：head标签里 link标签
位置: ./static文件夹下
2.网页图片
为了让网页不太单调，一般都会在网页里添加一些图片。
位置：./static/images文件夹下
html添加方法：body标签里 任意位置
层叠样式表(css)
CSS(Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言。
位置： ./static
使用： 一般需要在html文件里引入css文件，并在需要修改样式的标签里添加class属性值，最后css通过cssclass选择器
案例实现
创建静态文件夹
bash
mkdir static添加网站头像
decos.ico
html文件添加如下：
html
<head>
...
<link rel="icon" href="{{ url_for('static',filename='dicos.ico')}}">
</head>添加网页图片
先创建图片文件夹
bash
mkdir static/imagesavatar.png
totoro.gif
html文件添加如下：
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文件
html
<head>
...
<link rel="stylesheet" href="{{url_for( 'static', filename='style.css') }}" type="text/css">
</head>html标签添加class属性
html
<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样式文件
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直接拿
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>
© 2018 <a href="http://helloflask.com/tutorial">HelloFlask</a>
</small>
</footer>
</body>
</html>无html与css基础的直接来这里
代码里哪里不懂的直接跳转对应的网页搜索，或者直接提问AI。
效果演示
