html - 为什么我的 HTML 不能与我的 CSS 链接起来?

标签 html css

我正在学习在线教程,但我似乎无法将我的 CSS 与 HTML 代码链接起来。我将两个文件放在同一个文件夹中。这些文件称为 tut.html 和 tut.css

HTML:

<html>
<head>
<title>HTML5 Tutorial</title>
<link rel='stylesheet' href='tut.css'/>
</head>
<div id="wrapper">
<div id="header">
<div id="navigation">
<ul>
<li><a href="#">navigation1</a></li>
<li><a href="#">navigation2</a></li>
</ul>
</div>
</div>
<div id="sidebar">
<p>here is the sidebar</p>
</div>
<div id="content">
<p>here is the content</p>
</div>
<div id="footer">
<p>Here is the footer</p>
</div>
</div>
</html>

CSS:

    #wrapper {
  margin-right: auto;
  margin-left: auto;
  width: 96%;
}
#header {
  margin-right: 10px;
  margin-left: 10px;
  width: 940px;
}
#navigation {
  padding-bottom: 25px;
  margin-top: 26px;
  margin-left: -10px;
  padding-right: 10px;
  padding-left: 10px;
  width: 940px;
}
#navigation ul li {
  display: inline-block;
}
#content {
  margin-top: 58px;
  margin-right: 10px;
  float: right;
  width: 698px;
}
#sidebar {
  border-right-color: #e8e8e8;
  border-right-style: solid;
  border-right-width: 2px;
  margin-top: 58px;
  padding-right: 10px;
  margin-right: 10px;
  margin-left: 10px;
  float: left;
  width: 220px;
}
#footer {
  float: left;
  margin-top: 20px;
  margin-right: 10px;
  margin-left: 10px;
  clear: both;
  width: 940px;
}

最佳答案

您的 HTML 无效。你不见了<body> HTML 中的标记,这可能是问题的根源。如果没有,您还应该在页面顶部提供文档类型。将您的 html 设为:

<!doctype html>    
<html>
<head>
<title>HTML5 Tutorial</title>
<link rel='stylesheet' href='tut.css'/>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="navigation">
<ul>
<li><a href="#">navigation1</a></li>
<li><a href="#">navigation2</a></li>
</ul>
</div>
</div>
<div id="sidebar">
<p>here is the sidebar</p>
</div>
<div id="content">
<p>here is the content</p>
</div>
<div id="footer">
<p>Here is the footer</p>
</div>
</div>
</body>
</html>

关于html - 为什么我的 HTML 不能与我的 CSS 链接起来?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16692696/

相关文章:

android - 如何在 Android 的 Web View 中引用/链接到 Css 文件样式元素

css - Flex 元素在 Safari 中无法正常增长

html - Firefox 在输入文本和提交中添加 2px 额外填充

python - 收到任何错误 AttributeError : 'tuple' object has no attribute 'strip on user registration

html - CSS 截断了我的图像

css - 如何阻止绝对定位元素的父元素折叠

css - CSS 中没有父选择器有什么合理的理由吗?

html - 对齐表格单元格底部的按钮

html - 像 Word 文档一样格式化

jquery - 缩小时重新格式化 Twitter Bootstrap 菜单