css - 整个站点 div 中出现的正文背景色

Question

在通过body 标签创建完整背景时，很多时候都遇到过这个问题。如果 body 标签的背景是蓝色，那么网站中的所有小 div 都会显示相同的颜色。甚至主 div 背景也不工作。在这种情况下，我特别制作了所有 div background-none 。请告诉我是否有解决此问题的想法。

<header><div class="inner">
        <div class="h-top"><div class="left blue-text">Traditional Print • Social Syndication • Embedded Video • Radio</div> <div class="right"> (800)355-9500 <img src="images/in.png" alt="" align="absmiddle" title="linkedin.com"  />  <img src="images/twitter.png" alt="" align="absmiddle" title="twitter.com"  /> <img src="images/facebook.png" align="absmiddle" alt="" title="facebook.com"  /> <img src="images/bloger.png" alt="" align="absmiddle" title="linkedin.com"  /></div></div>

        <div class="clear"></div>
        <div class="h-bottom"><div class="left"><img src="images/logo.png" alt="" title="" /></div>
        <nav class="right"> 
            <ul>          
                <li>Our Guarantee</li>
                <li> Our Difference  </li>
                <li>What We Do </li>
                <li> Our Clients </li>
                <li>Contact</li>
            </ul>
        </nav>
        </div><!--h-bottom-->

      </div><!--inner-header-->    
    </header>





*{

    margin:0;
    padding:0;
    text-decoration:none;
    font-style:normal;
    color:#011c2d;
    font-size:17px;
    background:#d2d2d2;
    font-family:'schoolbookregular';
}

.main{
    width:1082px;
    margin:0 auto;
    background:#f5f5f5;
}

.inner{
    margin:0 50px;
}

.left{
    float:left;
}

.right{
    float:right;
}

.h-top{
    padding:20px 0;
    display: inline-block;
    width: 100%;
}

.blue-text{
    color:#0067b0;
    font-size: 15px;
}

.h-bottom{
    margin: 20px 0;
    display: inline-block;
    width: 100%;
}

header{
    font-family:'schoolbookregular';
}

nav{
    margin:17px 0 0 0;
}

nav>ul{
    marigh:0;
    padding:0;
}

nav>ul>li{
    float:left;
    padding:7px 15px;
    margin-left:7px;
    color:#fff;
    background:#0067b0;
    list-style:none;
}

Answer 1

问题是默认情况下您的 .main 高度将为 0，因此您看不到任何输出。尝试将高度更改为 500 像素或您喜欢的某个值。

/*If you want a background color to body do it here, not on '*' */
body {
    min-height: 100%;
    background: #0000ff;
}

.main {
    /* other styles */
    min-height: 500px;
}