示例html(它实际上是aws服务器上django的模板),在下面,然后是css。我有一个github repo,我用来将文件从我的本地机器往返传送到aws机器,所以这是在本地发生的。我最初尝试使用../css/limbo.css中的css文件(相对于html),但随后将css移动到与html相同的文件夹中,以查看是否存在目录路径问题。 a href是原始位置的链接, 工作,顺便说一句。
name.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标题的样式块中,它会按预期工作。我只是做了愚蠢的事情,以确保它按预期工作,然后将建立网站。
https://jsfiddle.net/bwrkcey6/可能会有效,也许它会有所帮助。
答案 0 :(得分:1)
您的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>