Много раз сталкивались с этой проблемой при создании полного фона через тег 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;
}
Если вы хотите установить фон тела, сделайте это явно с помощью
body {
background: #d2d2d2;
}
Вы не должны устанавливать фон *
, это обычно вызывает много перезаписи, что не очень приятно.
*
вместо тега body
. Означает, что не так с *
Проблема заключается в том, что ваша высота.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;
}
Лучший способ решить - ввести новый тег "div" на вашей странице без содержимого. это поможет вам..!