Question

我刚开始一个非常简单的练习，我创建了一个简单的html文件和一个css文件（在css文件夹中），以便了解有关Angularjs的更多信息。练习从创建这两个文件开始（所以还没有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 / style.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; }

Answer 1

正如其他人注意到的那样，你拼错了你的id内联你的HTML div标签。所以将id =“myQuizz”更改为id =“myQuiz”。

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

我创建了一个小提琴，它修正了myQuiz拼写错误，并添加了一个通用背景，以便您可以看到它。我还添加了

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

这样你就可以看到背景

http://jsfiddle.net/hb7du2xq/

Answer 2

除了检查你的样式表的链接路径（css必须在名为'css'的文件夹中）之外，我同意Wesley，你必须在div中放置内容才能看到任何内容。如：

<p>Hello World.</p>

复制并粘贴到其中：

<div id="myQuizz">

</div>

所以它看起来像这样：

<div id="myQuizz">
    <p>Hello World.</p>
</div>

Answer 3

哥们，要么删除一个＆＃34; z＆＃34;来自id =＆＃34; myQuizz＆＃34; ...或者再添加一个＆＃34; z＆＃34;你的css选择器，如#myQuizz ....浏览器不解释stles，因为它无法找到一个。：）

Answer 4

过了一段时间，我设法得到了你的错误，它与css文件或浏览器无关。这只是代码中的错字。

只需将div的ID从<div id="myQuizz">更改为<div id="myQuiz">。这是因为您在css中使用了#myQuiz{.....}

我的浏览器没有解释我的css文件

4 个答案: