Question

我对CSS很陌生，我正在学习如何创建一个盒子，但不明白为什么我的div没有显示蓝色背景？你能解释一下吗？谢谢。

示例：

<!--CSS-->
<style>
<style=text/css>
div {height:300px; width:400px; background-color:blue;}
p {height:240px; width:600px; background-color:pink;}
</style>


<!--HTML-->

<body>
<div>
<p> Lorem ipsum dolor sit amet, has dictas vivendo maiestatis in, tota veritus molestie no pri.   Vis no cetero discere pertinax. Mea an iudico fabellas corrumpit. Et justo vivendo mediocritatem nec, dicit aliquip mandamus id per. Vim ne tale menandri. Ne graece iracundia voluptaria his, quis nusquam mea ut, vel cu vivendum corrumpit reformidans. 
</p>
</body>

Answer 1

你的风格标签不适合初学者。

这已得到纠正：

<style>
div {height:300px; width:400px; background-color:blue;}
p {height:240px; width:600px; background-color:pink;}
</style>

*如Mouser所述。这应该在你的头标记

<head>
    <style>
    div {height:300px; width:400px; background-color:blue;}
    p {height:240px; width:600px; background-color:pink;}
    </style>
</head>

Answer 2

我在这里看到了两个问题，

div标签未关闭。
您的样式标记格式不正确。

我想指出，自从回应以来，OP已被编辑......

因此您的代码应如下所示：

<html>
<!--CSS-->
<head>
<style type="text/css">

div {
    height:300px;
    width:400px;
    background-color:blue;
    }
p {
    height:240px;
    width:600px;
    background-color:pink;
    }
</style>
</head>

<!--HTML-->

<body>
<div>
<p>
    Lorem ipsum dolor sit amet, has dictas vivendo maiestatis in, tota veritus molestie no pri.   Vis no cetero discere pertinax. Mea an iudico fabellas corrumpit. Et justo vivendo mediocritatem nec, dicit aliquip mandamus id per. Vim ne tale menandri. Ne graece iracundia voluptaria his, quis nusquam mea ut, vel cu vivendum corrumpit reformidans.
</p>
</div>
</body>
</html>

Answer 3

您的标签看起来像这样：<style=text/css>。在你的问题被另一个人编辑之后有一段时间，当问题中的问题确实有效时，可能会解释一些奇怪的答案。工作代码的结果看起来有点奇怪，因为段落比div宽，但它（或确实）工作。

我认为您尝试编码的是<style type="text/css">，这是严格正确的。

我已将您的代码放在下面，并进行了微小的更正。它有效。

永远记住http://jigsaw.w3.org/css-validator/处的CSS验证程序和http://validator.w3.org/处的HTML验证程序是您的朋友。当某些东西不起作用时，第一个要做的就是验证您的代码。

<!DOCTYPE html>
<html>
<head>
<title>Stack Overflow Tester</title>
<style type="text/css">
  div {
    height:300px; 
    width:400px; 
    background-color:blue;
  }
  p {
    height:240px; 
    width:600px; 
    background-color:pink;
  }
</style>
</head>
<body>
 <div>
    <p> Lorem ipsum dolor sit amet, has dictas vivendo maiestatis in, tota veritus molestie no pri.   Vis no cetero discere pertinax. Mea an iudico fabellas corrumpit. Et justo vivendo mediocritatem nec, dicit aliquip mandamus id per. Vim ne tale menandri. Ne graece iracundia voluptaria his, quis nusquam mea ut, vel cu vivendum corrumpit reformidans. 
    </p>
  </div>
</body>
</html>

Answer 4

尝试这样做，从p选择器中删除背景颜色，将宽度减小到400px。最后改变div背景颜色：＃0000FF;为了更好的蓝色。希望这会有所帮助：）

Answer 5

请将您的样式信息放在网页的head部分。并删除它上面的未关闭样式标记。未闭合的样式标记可防止解析样式规则。就像每种编程语言一样：如果语法不正确，程序将无法正常工作或渲染错误。

请查看网页的正确语法。 http://www.w3schools.com/html/html5_syntax.asp

基本文件：

<!doctype>
   <html>
      <head>
        <title></title>
        <style>

        </style>
        <script></script>
      </head>
      <body>
        <script></script> <!-- can be in head and body, isn't necessary for basic html document. -->
      </body>
   </html>

Html元素以小写形式编写。

在CSS中，为什么我无法使用div放置背景彩色框？

5 个答案: