Question

我在网上学习了一个教程，但我似乎无法将我的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;
}

Answer 1

您的HTML无效。您的HTML中缺少<body>个标签，这可能是您的问题的根源。如果没有，您还应该在页面顶部提供doctype。制作你的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>

Answer 2

如果您完全此文件：

tut.css

它与tut.html位于同一文件夹中，然后，您的HTML / CSS必须正常工作，因为它适用于所有浏览器。也许你已经用这样的名字保存了CSS文件：tut.css.txt。

如果您使用的是Windows，请按照此说明确认您的文件名：

打开我的电脑
从View菜单中选择Folder and Search Options
在已打开窗口的View标签中，取消选中此选项：隐藏已知文件类型的扩展程序
申请并确认

enter image description here

现在你必须看到你的css文件的完整名称。

为什么我的HTML不能与我的CSS链接？

2 个答案: