我在将 CSS 链接到 HTML 页面时遇到问题。两个文件都在同一个目录中，但是当我在 Chrome 的本地端口上运行时，我在终端中得到了这个文件（“test3”是 html 文件）：Not Found: /test3/sidebar.css[15/Apr/2020 17:57:52] "GET /test3/sidebar.css HTTP/1.1" 404 8233无论我如何更改 href 路径，除非我包含目录名：css 文件名，否则此问题都会出现一些变化，但即使如此，HTML 文件也不会继承 CSS 样式。我正在开发侧边栏导航，这就是为什么名称是这样的，但我只是包含了我在下面使用的测试线：.html 文件：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Testang</title> <link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link href="sidebar.css" rel="stylesheet" type="text/css"></head><body><h1> Test </h1></body></html>如果我输入 href 像<link href="requests:sidebar.css" rel="stylesheet" type="text/css"> 我没有收到错误，但仍然没有看到 CSS 更改（“requests”是目录的名称）。.css 文件：h1 { color: red; font-size: 50px;}我刚刚从 PyCharm 切换过来。设置 Atom 后，我从 PyCharm 文件夹中打开 Atom 中的项目。其他一切似乎都工作正常。
4 回答
达令说
TA贡献1821条经验 获得超6个赞
在 HTML 文件的开头添加：
{% load static %}并改变
<link href="sidebar.css" rel="stylesheet" type="text/css">
像这样的事情：
<link href="{% static 'sidebar.css' %}" rel="stylesheet" type="text/css">
小唯快跑啊
TA贡献1863条经验 获得超2个赞
由于 CSS 文件位于同一文件夹中，您可以尝试如下操作：
<link href="./sidebar.css" rel="stylesheet" type="text/css">
点告诉浏览器在与 HTML 相同的文件夹中进行搜索。
沧海一幻觉
TA贡献1824条经验 获得超5个赞
代码看起来不错，没有错别字。确保 CSS 文件和 HTML 文件位于同一文件夹中，并且它们不是文本文件并且具有扩展名，当然，文件已保存。
test3是父目录吗？
它只是 HTML 和 CSS 还是一个 Django 项目？
森林海
TA贡献2011条经验 获得超2个赞
我在主项目目录中创建了一个名为“static”的文件夹，然后在其中创建了一个名为“css”的目录。然后，这是我所缺少的一件大事，进入项目的 settings.py 并创建STATICFILES_DIRS该新文件夹的路径。
根据我所读到的内容，当我将其投入生产时，我需要一些额外的工作。
# Static files (CSS, JavaScript, Images)
https://docs.djangoproject.com/en/3.0/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
"full folder path to static folder"
]
然后在 HTML 文件中输入：
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="{% static 'css/sidebar.css' %}">
</head>
关键部分是load static顶部的 和 href to {% static 'css/sidebar.css' %}。
- 4 回答
- 0 关注
- 47 浏览
添加回答
举报
0/150
提交
取消