-1

我正在关注在线教程，但似乎无法将我的 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;
}
4

2 回答 2

1

如果你有这个文件：

tut.css

它与 位于同一个文件夹中tut.html，因此，您的 HTML/CSS 必须正常工作，因为它在所有浏览器中对我来说都很好。也许你已经用这样的名字保存了 CSS 文件：tut.css.txt.

如果您使用的是 Windows，请按照以下说明确定您的文件名：

  1. 打开我的电脑
  2. 从View菜单中，选择Folder and Search Options
  3. 在View打开的窗口选项卡中，取消选择此选项：隐藏已知文件类型的扩展名
  4. 申请并确定

在此处输入图像描述

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

于 2013-05-22T13:33:00.853 回答
1

您的 HTML 无效。您的 HTML 中缺少<body>标签，这可能是您的问题的根源。如果没有，您还应该在页面顶部提供一个文档类型。让你的 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>
于 2013-05-22T13:14:35.300 回答