Fatal编程技术网

Javascript CSS背景颜色问题

javascript html css

Javascript CSS背景颜色问题,javascript,html,css,Javascript,Html,Css,我正在尝试重构我的CSS，合并多余的元素并删减不必要的代码（我正在学习一门移动应用程序课程，重点是创建基于web的混合应用程序；使用HTML5、CSS和JavaScript。因此，必须重构代码）。我最初拥有的是： body { width: 400px; border: solid; } header, footer { background-color: #ADDFFF; } .buttons { width: 400px; text-align:

我正在尝试重构我的CSS，合并多余的元素并删减不必要的代码（我正在学习一门移动应用程序课程，重点是创建基于web的混合应用程序；使用HTML5、CSS和JavaScript。因此，必须重构代码）。我最初拥有的是：

body
{
    width: 400px;
    border: solid;
}

header, footer
{
    background-color: #ADDFFF;
}

.buttons
{
    width: 400px;
    text-align: center;
    background-color: #ADDFFF;
}
它将使用如下HTML结构：

<BODY>
   <header>
   </header>
   <div class="buttons">
   </div>
   <footer>
   </footer>
</BODY>
我尝试添加
背景色：#ADDFF到主体CSS中，并删除所有剩余的
背景色
引用。当我这样做时，整个页面就变成了我设置的颜色；我有一半的期待。在不冗余使用CSS元素的情况下，是否可以将主体的背景设置为仅包含页面显示的区域

简单/TL；DR版本：


我试图使整个页面的背景颜色相同。目前，只需设置
标记的样式即可使整个背景（也在我的页面之外）着色
 可以做的是将所有内容环绕在包含页眉、内容和页脚的div中。让它成为你想要的页面宽度，高度应该由内容填充。然后使背景的颜色，你想要的


<BODY>
    <div id="container">
       <header>
       </header>
       <div class="buttons">
       </div>
       <footer>
       </footer>
    </div>
</BODY>






因此，容器不会是页面的整个宽度。它只会像内容一样宽

这里有一个例子

因此，您可以设置默认背景，然后根据需要更改所有其他元素的背景


body > * { background-color: #ADDFFF; }



和
只是指南，与

你需要做的是做如下的事情


body
{
    width: 400px;
    border: solid;
}

header, footer
{
    background-color: /* change here as necessary */;
}

.buttons
{
    width: 400px;
    text-align: center;
    background-color: /* change here as necessary */;
}

#container 
{
    background-color: #addfff;
}


然后你的html文档应该是这样的


<BODY>
   <header>
   </header>
   <div id="container">
      <div class="buttons">
      </div>
   </div>
   <footer>
   </footer>
</BODY>



您可以为
html
元素设置不同的
背景色。这将迫使正文只影响其内容，而不影响整个页面


html
{
    background-color: #ffffff;
}

body
{
    width: 400px;
    border: solid;
    background-color: #ADDFFF;
}

.buttons
{
    width: 400px;
    text-align: center;
}



在
上有一个工作演示，删除页脚中的div，并将其更改为“也可以简单地回答您的问题”。如果我没有弄错的话，那么你是想给你的div添加不同的颜色？你说的“仅是页面显示的区域”是指
主体的那些没有被其他元素重叠的部分吗？这正是我想做的。非常感谢。