html不会链接到本地​​系统

时间:2016-10-09 02:31:21

标签: html css google-chrome

示例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=&quot;clearfloat&quot; /> */
.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/可能会有效,也许它会有所帮助。

1 个答案:

答案 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>