编写网页时遇到的小问题（flask+HTML）

非自律懒癌患者

已于 2024-03-19 11:42:22 修改

阅读量1.9k

点赞数 34

文章标签： flask html python

于 2024-03-09 00:34:30 首次发布

本文链接：https://blog.csdn.net/weixin_51397022/article/details/136574886

版权

文章目录

从服务器进入网页后设置的背景图片不能正常加载，显示为空白背景

原因：我把图片放到了templates文件夹下了，但加载页面的时候只能读入templates文件夹下的html文件，图片文件是不能正确加载的。
解决：在 Flask 应用中，通过模板（template）和静态文件（static）来加载指定图片作为背景图片，可以按照以下步骤进行：
- 放置图片到静态文件夹：
  在flask 应用根目录下创建一个static文件夹。然后，将图片文件放入 static 文件夹中，或者创建一个子文件夹来组织静态文件，比如 static/images。
- 在 CSS 中设置背景图片：
  接下来，创建一个 CSS 文件来定义背景图片样式。将 CSS 文件放在 static 文件夹中，或者在 static 文件夹下创建一个子文件夹来存放 CSS 文件，例如 static/css。在 CSS 文件中，使用 url() 函数来引用你的背景图片。
  例如，创建一个名为 styles.css 的文件，并放在 static/css 文件夹中，内容如下：
```
/* static/css/styles.css */  
body {  
    background-image: url('../images/background.jpg'); /* 引用图片的路径 */  
    background-repeat: no-repeat;  
    background-size: cover; /* 或其他你想要的背景尺寸 */  
    background-position: center; /* 图片居中 */  
    margin: 0;  
    padding: 0;  
}
```
  注意路径 …/images/background.jpg 中的 … 表示上一级目录，即 static 文件夹。如果你的图片直接放在 static 文件夹下，则路径应为 background.jpg。
  最终文件夹的结构如下所示：
- 在 HTML 模板中引入 CSS：
  在 HTML 模板中引入这个 CSS 文件。假设你的模板文件名为 index.html，并且位于 templates 文件夹中，可以这样写：
```
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Flask 背景图片示例</title>  
      
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">  
</head>  
<body>  
    <h1>欢迎来到我的 Flask 网页</h1>  
    <p>这里有一些内容。</p>  
</body>  
</html>
```
  在标签中，我们使用 flask 的 url_for 函数来动态生成 CSS 文件的 URL。这是确保即使你更改了静态文件夹的名称或结构，CSS 文件的引用也能正确工作的推荐方式。

container的宽度调试

问题： 不管max_width调的多大container的宽都不会变大，但设置了width: 100%就变大了。（我的container的父元素是body）

原因： 默认宽度：如果容器没有设置width属性，它可能会采用默认的宽度行为，这通常取决于其内容或根据某种算法计算出来的。max-width属性在这种情况下可能不起作用，因为它仅限制最大宽度，而不是设置具体宽度。而width: 100%会覆盖这个默认行为，强制容器宽度为其父元素宽度的100%。

GPT语言引导生成代码

用gpt生成一段新闻标题分类的网页，一开始是这样提问的编写一个python程序，要求运行之后可以打开一个网页，网页制作精美，在中间是一个输入框，底下有一个输出框，输入一句中文新闻标题，点击“查看分类结果”按钮，在输出框中显示分类结果
结果生成的网页一点“显示分类结果”按钮，就跳转到了一个新的界面，如图所示：
在这里插入图片描述

后来改变问法编写一个python程序，要求运行之后可以打开一个网页，网页制作精美（白绿为主要配色，边框圆滑美观），在中间是一个输入框，底下有一个文本显示框，输入一句中文新闻标题，点击“查看分类结果”按钮，在文本显示框中显示分类结果。已知app.py如下所示：得到了想要的效果如下：
在这里插入图片描述