Django HTML模板中style.css无法加载问题求助

1. 补上模板静态标签加载 #

你的模板里没加载static标签，Django无法解析{% static %}语法，会直接把这个字符串输出到HTML里，导致CSS路径错误。必须在模板最开头加上：

{% load static %}
<html>
<head>
<title>PWC Login</title>
<link rel="stylesheet" href="{% static 'css/style.css'%}">
...
</head>

2. 检查settings.py静态文件配置 #

确保配置项正确：

# 确认INSTALLED_APPS包含静态文件应用
INSTALLED_APPS = [
    # 其他应用
    'django.contrib.staticfiles',
]

# 静态文件访问URL前缀
STATIC_URL = '/static/'

# 如果你的静态文件放在项目根目录的static文件夹下，添加这个配置
STATICFILES_DIRS = [
    BASE_DIR / "static",
]

注：STATIC_ROOT是生产环境收集静态文件用的，开发环境不需要配置。

3. 修正CSS中的背景图路径 #

CSS里的背景图路径是相对当前CSS文件的位置，你的style.css在static/css/目录下，所以背景图应该用相对路径../images/pic1.jpeg，而不是绝对的static/images/pic1.jpeg：

body {
    margin: 0;
    padding: 0;
    background: url('../images/pic1.jpeg');
    background-size: cover;
    background-position: center;
    font-family: sans-serif;
}

4. 验证静态文件可访问性 #

启动Django开发服务器后，直接访问以下URL，确认文件能正常加载：

• http://localhost:8000/static/css/style.css
• http://localhost:8000/static/images/pic1.jpeg
  如果返回404，说明静态文件路径配置有误，回到步骤2重新检查。

5. 强制刷新浏览器缓存 #

浏览器可能缓存了旧的资源，按Ctrl+F5强制刷新页面，或者用隐身模式测试，排除缓存干扰。

内容的提问来源于stack exchange，提问作者TexGuru