html - 我的浏览器不解释我的 css 文件

标签 html css browser server

我刚刚开始了一个非常简单的练习,我创建了一个简单的 html 文件和一个 css 文件(在 css 文件夹中),以了解有关 Angularjs 的更多信息。 练习从创建这 2 个文件开始(因此还没有 Angularjs)。

出于某种原因,css 文件无法在我的任何浏览器中呈现。 在 Chrome 上,我检查了 index.html 文件,然后单击资源,Css 文件就在那里!但它不起作用。

我不知道该怎么办,但这似乎是一个非常愚蠢的错误。 我在几个地方读到它可能与名为 nginx.conf 的文件有关

index.html

<!DOCTYPE HTML>
 <html>
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Test Your Knowledge: Saturn</title>
     <link rel="stylesheet" type="text/css" href="css/style.css">
   </head>
     <body>
       <div id="myQuizz">


      </div>
  </body>
</html>

css/样式.css

body { background-color: #fff; padding: 20px; }

#myQuiz {
 font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 400;
 width: 650px; height: 650px;
 position: relative;
 overflow: hidden;
 color: #fff;
 background: #000 url(.../images/background.jpg) no-repeat 0px 0px;
}

#myQuiz h2 {font-size: 3em; margin: 0px; font-weight: 100;} 
#myQuiz h3 {font-size: 2.4em; margin: 0px; font-weight: 100;}
#myQuiz p { margin: 0px 0px 14px 0px; }
#myQuiz .btn{
 display: inline-block;
 cursor: pointer;
 background-color: #c04b01;
 color: #fff;
 text-decoration: none;
 padding: 5px 15px;
 border-radius: 6px;
}
/* Intro */
#myQuiz  .intro { position: absolute; top: 225px; left: 40px; width: 550px;}
#myQuiz .intro p { margin: 0px 0px 40px 0px; }

最佳答案

正如其他人所注意到的,您在 HTML div 标记内拼错了您的 id。因此,将 id="myQuizz"更改为 id="myQuiz"。

<div id="myQuiz"></div>

我创建了一个 fiddle ,它更正了 myQuiz 的拼写错误,并添加了一个通用背景以便您可以看到它。我也加了

background-size: 100%;
background-position: center; 

只是为了让你能看到背景

http://jsfiddle.net/hb7du2xq/

关于html - 我的浏览器不解释我的 css 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33975281/

相关文章:

java - 使用 JSoup 选择特定的 <tr> 标签

html - 页面右侧出现空白的原因

javascript - jQuery 替代 Div 元素

javascript - 图像 map 鼠标悬停突出显示

html - Webkit 缺陷?为什么不应该将 Webkit 用作 HTML/CSS 开发的基准?

javascript - 更改 html 后的 jQuery AJAX 后退按钮

html - 如何使 float 跨度和选择元素填充表格单元格的宽度

javascript - 如何使列表项具有均匀大小的高度

html - 适合 Firefox 的 960.gs 插件?

javascript - 使用 'document' 命名我的变量是否合法?