Question

所以我在这里粘贴代码：

<!doctype html>

<head>

    <title>Skeleton website</title>

    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
            background-color: gray;
        }
        .pagewidth
        {
            width: 1250px;
            /*background-color: gray;*/
        }
        #header
        {
            text-align: center;
            background-color: white;
        }
        .clinks
        {
            display: inline;
            background-color: white;
        }
        #maincontent
        {
            background-color: black;
        }
        #partition_1
        {
            width: 310px;
            min-height: 100px;
            background-color: red;
            float: left;
            border-left: solid 1.25px black;
            border-right: solid 1.25px black;
        }
        #partition_2
        {
            width: 310px;
            min-height: 100px;
            background-color: blue;
            float: left;
            border-left: solid 1.25px black;
            border-right: solid 1.25px black;
        }
        #partition_3
        {
            width: 310px;
            min-height: 100px;
            background-color: green;
            float: left;
            border-left: solid 1.25px black;
            border-right: solid 1.25px black;
        }
        #partition_4
        {
            width: 310px;
            min-height: 100px;
            background-color: violet;
            float: left;
            border-left: solid 1.25px black;
            border-right: solid 1.25px black;
        }
        #partition_1_h
        {
            width: 310px;
            height: 20px;
            background-color: orange;

        }
        #partition_2_h
        {
            width: 310px;
            height: 20px;
            background-color: pink;

        }
        #partition_3_h
        {
            width: 310px;
            height: 20px;
            background-color: white;

        }
        #partition_4_h
        {
            width: 310px;
            height: 20px;
            background-color: yellow;

        }
    </style>


</head>

<body>
    <div class = "pagewidth" id = "header">
        <div id = "logo">Logo goes here</div>

        <div id="controllinks">
            <div class = "clinks" id="Clink1">Link 1</div>
            <div class = "clinks" id="Clink1">Link 2</div>
            <div class = "clinks" id="Clink1">Link 3</div>
        </div>
    </div>  
        <!-- <div id = "headerlinks"></div> -->
    <div class = "pagewidth" id = "maincontent">
        <div id = "partition_1">
            <div id = "partition_1_h"></div>
        </div>
        <div id = "partition_2">
            <div id = "partition_2_h"></div>
        </div>
        <div id = "partition_3">
            <div id = "partition_3_h"></div>
        </div>
        <div id = "partition_4">
            <div id = "partition_4_h"></div>
        </div>
    </div>


    <div class = "pagewidth" id = "footer"></div>
    <script type="text/javascript" src = "jquery.min.js">

    </script>
</body>

我认为，网站是一个非常标准的骨架！所以这是我的问题：为什么不是背景颜色：#header造型部分的白色应用？如果你注意到样式部分开始处的位置，我已经为所有元素应用了0个边距和填充，除非另有说明。之后，我确保为网页上的所有不同元素添加不同的背景颜色属性。它们工作得很好，完美地覆盖了* css样式。但是，就标题ID而言，它无法覆盖应用于指定白色的整个网页的灰色。有谁知道为什么会这样？我很困惑，老实说有点沮丧。这一定是我错过的一个细节，但是我需要第二双眼睛和一只手来指责我并指向正确的方向。

非常感谢！非常感谢！

干杯。

Answer 1

这是因为您已将background-color: gray应用于所有元素。这意味着#logo和#conlinklinks元素的背景颜色为灰色。由于这些元素位于标题内，您将看不到标题的背景颜色。

相反，你应该给身体一个灰色的背景颜色而不是所有的元素。

CSS

* {
    margin: 0;
    padding: 0;
}

body {
   background-color: gray;
}

请参阅codepen here

Answer 2

你的#logo div没有任何特定的CSS，所以它得到* {background-color：gray;}，它涵盖了#header。如果减小#logo的大小，您可以看到带有白色背景的#header div 因此，而不是*{background-color:grey;}给body{background-color:grey;}

Answer 3

您可以将以下修改过的CSS用于#header ::

#header
{
 text-align: center;
 background-color: white;
 float: left;
 width: 100%;
 display: block;
}

并使用：

   *
    {
        margin: 0;
        padding: 0;
    }
  body{
  background-color: gray;
  }

使用背景颜色与某些css样式的差异

3 个答案: