#html #css #google-chrome
#HTML #css #google-chrome
Вопрос:
ниже приведен пример html (который на самом деле является шаблоном для django на сервере aws), затем css. У меня есть репозиторий github, который я использую для переноса файлов с моего локального компьютера на компьютер aws, так что это происходит локально. Сначала я попытался использовать файл css в ../css/ limbo.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=amp;quot;clearfloatamp;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. Ваш тег ссылки не должен находиться внутри вашего тега стиля.
Ответ №1:
Ваш link тег не должен находиться внутри style тега.
Исправлен HTML с удаленным тегом style:
<!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>
Комментарии:
1. Я только что понял это, когда вы опубликовали, но спасибо! Я соглашусь, как только истечет 5-минутный таймер