CSS背景颜色问题

我试图重构我的CSS，结合冗余元素和修剪不必要的代码（我正在开发一个专注于创建基于Web的混合应用程序的移动应用程序课程;使用HTML5，CSS和JavaScript。因此，代码必须重构）。我原本是：CSS背景颜色问题

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>

我尝试添加在background-color: #ADDFF;进入人体CSS和去除background-color引用的所有的休息。当我这样做时，整个页面就变成了我设置的颜色;这是我一半的期望。无论如何，没有多余的CSS元素使用，设置主体的背景只包含页面显示的区域？

简单/ TL; DR版本：

我试图使首页的整个背景相同的颜色。目前只是样式标签会导致整个背景（也在我的页面外）被着色。

来源

2012-02-27 Brendan

一个工作演示只需删除DIV在页脚并将其更改为也可以你你的问题。如果我没有错，那么你正在为你的div添加不同的颜色？ – coletrain 2012-02-27 23:32:18

“只是由页面显示的区域”是指那些不与其他元素重叠的“body”的那些部分？ – paislee 2012-02-27 23:33:03

可以为html元素设置不同的bakground-color。这将迫使身体只影响它的内容，而不是整个页面..

html 
{ 
    background-color: #ffffff; 
} 

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

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

，并在http://jsfiddle.net/gaby/SsFsS/

来源

2012-02-27 23:39:50

这正是我想要做的。谢谢！ – Brendan 2012-02-27 23:56:51

非常感谢，这也对我有用。 – 2012-03-21 01:17:58

你可以做的是在包含标题，内容和页脚的div中围绕EVERYTHING。使它成为你想要的页面宽度应该由内容填充的宽度。然后制作你想要的颜色的背景。

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

所以容器不会是整个页面的宽度。它只会和内容一样宽。

这里是一个例子http://jsfiddle.net/pRwMn/1/

所以，你可以设置默认的背景，然后你可以改变所有其他元素的背景需要

来源

2012-02-27 23:34:51 Henesnarfel

如何

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

来源

2012-02-27 23:35:32 Pointy

<header> and <footer>只是指导方针和不具有与<body>

相同的效果要做的事情就像下面这样。

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>

来源

2012-02-27 23:36:20 ncremins

CSS背景颜色问题

回答

相关问题