示例 html(实际上是 aws 服务器上 django 的模板)在下面，然后是 css。我有一个 github 存储库，我用它来将文件从我的本地机器来回传送到 aws 机器，所以这是在本地发生的。我最初尝试使用 ../css/limbo.css 中的 css 文件(相对于 html)，但随后将 css 移动到与 html 相同的文件夹以查看我是否遇到目录路径问题。 a href 是指向它的原始位置的链接，顺便说一句，确实有效。
名称.html:
<!DOCTYPE html>
<html>
<head>
<style>
<link rel="stylesheet" type="text/css" href="limbo.css">
</style>
</head>
<body>
<div class=top> <h1>This is a heading</h1> </div>
<div class=left> <h3>Left Side</h3> </div>
<div class=main>
<p>This is a paragraph.</p><br>
<a href="../css/Limbo.css">css</a>
<form action="/polls/name-test.html" method="post">
{% csrf_token %}
{{ form }}
<input type="submit" value="OK">
</form>
<br><p class=red>This is a second paragraph</p>
</div>
</body>
</html>
limbo.css:
/*
Theme Name: Limbo browser
Theme URI:
Description:
for CS419 - Oregon State University
Fall 2016
Version: 1.0
Author: Keith McKinley, John Watts, Marta Wegner
Author URI:
*/
/* reset styles */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%;
vertical-align: baseline; background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
form {color: yellow;}
body {
font-size: 62.5%;
text-align: center;
color: #000000;
}
.bold {
font-weight: strong;
}
/* container - place inside each section or around the entire page depending on your layout */
.container {
width: 960px;
margin: 0 auto;
text-align: left;
position: relative;
}
/* for clearing any floats <br class="clearfloat" /> */
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.top {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 23px;
}
.main {
padding-top: 23px;
}
.left {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 10%;
height: 100%;
border: right;
padding-top: 10em;
}
一开始以为是django的问题，但是我本地连django都没有(win8.1 surface, fwiw)，所以这只是一个chrome 53.0.2785.143浏览器。
最有趣的是，如果我复制 limbo.css 的全部内容并将其放入 html header 的样式 block 中，它会按预期工作。我只是在做一些愚蠢的事情来确保一切都按预期工作，然后再构建网站。
https://jsfiddle.net/bwrkcey6/可能会奏效，也许会有帮助。
最佳答案
您的 link 标签不应位于 style 标签内。
更正了 HTML，删除了样式标签:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="limbo.css">
</head>
<body>
<div class=top> <h1>This is a heading</h1> </div>
<div class=left> <h3>Left Side</h3> </div>
<div class=main>
<p>This is a paragraph.</p><br>
<a href="../css/Limbo.css">css</a>
<form action="/polls/name-test.html" method="post">
{% csrf_token %}
{{ form }}
<input type="submit" value="OK">
</form>
<br><p class=red>This is a second paragraph</p>
</div>
</body>
</html>
关于html 不会链接到本地系统上的外部样式表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39939401/