2015-04-19 63 views
0

看看這個html。我想div的背景顏色 - '社會'出現,但它並沒有出現.. :(div的背景色不顯示

我已經試過溢出:隱藏和清除:都..但他們都沒有工作..請幫助

@charset "utf-8"; 
 
/* CSS Document */ 
 

 
body { 
 
\t border-top: solid 10px #ff6b39; 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 

 
.wrap { 
 
\t width: 940px; 
 
\t margin: 0 auto; 
 
} 
 

 
header { 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t padding-top: .001em; 
 
\t position: relative; 
 
\t border-bottom: 2px solid #e5e5e5; 
 
} 
 

 
header h1 { 
 
\t background: url(img/sprite.png) no-repeat 0 0; 
 
\t background-position: 0px -51px; 
 
\t width: 172px; 
 
\t height: 25px; 
 
\t text-indent: -9999px; 
 
\t float: left; 
 
\t margin-top: 25px; 
 
} 
 

 
header h1 a { 
 
\t width: 172px; 
 
\t height: 25px; 
 
\t display: block; 
 
} 
 

 
header p { 
 
\t margin-top: 26px; 
 
\t float: left; 
 
\t margin-left: 25px; 
 
\t font-size: 14px; 
 
    font-family: "Myriad Pro"; 
 
    color: rgb(123, 123, 123); 
 
    line-height: 1.786; 
 
    text-align: left; 
 
} 
 

 
header nav { 
 
\t clear: both; 
 

 
} 
 

 
header nav ul { 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t position: absolute; 
 
\t top: 25px; 
 
\t right: 0; 
 

 
} 
 

 
header ul li { 
 
\t list-style: none; 
 
\t padding: 0 18px; 
 
\t float: left; 
 
\t border-right: 1px solid #e4e4e4; 
 
} 
 

 
header nav ul li:last-child { 
 
\t border-right: none; 
 
} 
 

 
header nav ul li:last-child { 
 
\t padding-right: 0px; 
 
} 
 

 
header ul li a { 
 
\t text-decoration: none; 
 
\t font-size: 20px; 
 
    font-family: "Georgia"; 
 
    color: rgb(245, 103, 55); 
 
    font-style: italic; 
 
    line-height: 0.85; 
 
    text-align: right; 
 
\t display: block; 
 
} 
 

 
.social { 
 
\t clear: both; 
 
\t position: relative; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t background: #e5e5e5; 
 
} 
 

 
.social h2 { 
 
\t font-size: 30px; 
 
\t font-family: "Georgia"; 
 
\t color: rgb(0, 0, 0); 
 
\t font-style: italic; 
 
\t line-height: 1.4; 
 
\t text-align: left; 
 
\t font-weight: 100; 
 
\t float: left; 
 
} 
 

 
.social ul { 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t position: absolute; 
 
\t top: 25px; 
 
\t right: 0; 
 
} 
 

 
.social ul li { 
 
\t list-style: none; 
 
\t float: left; 
 
} 
 

 
.social ul li a { 
 
\t font: 0/0; 
 
\t color: transparent; 
 
\t background-color: transparent; 
 
\t text-decoration: none; 
 
\t display: inline-block; 
 
\t padding-right: 10px; 
 
\t background: url(img/sprite.png) no-repeat 0 0; 
 
\t width: 41px; 
 
\t height: 41px; 
 
} 
 

 
.social a.facebook { 
 
\t background-position: 0px 0px; 
 
} 
 

 
.social a.vimeo { 
 
\t background-position: -49px 0px; 
 
} 
 

 
.social a.lastfm { 
 
\t background-position: -100px 0px; 
 
} 
 

 
.social a.linkedin { 
 
\t background-position: -150px 0px; 
 
} 
 

 
.social a.dribble { 
 
\t background-position: -200px 0px; 
 
}
<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
    <title>mumbo website - PSD to HTML</title> 
 
    <link type="text/css" rel="stylesheet" href="style.css"> 
 
</head> 
 

 
<body> 
 
<div class="wrap"> 
 
\t 
 
    <header> 
 
    \t \t <h1><a href="#">Mumbo logo</a></h1> 
 
      <p>Powered by Jeffrey Way Industries</p> 
 
      <nav> 
 
      \t \t <ul> 
 
        \t \t <li><a href="#">about</a></li> 
 
          <li><a href="#">portfolio</a></li> 
 
          <li><a href="#">contact</a></li> 
 
        </ul> 
 
      </nav> 
 
    </header> 
 

 
<div class="social"> 
 
\t \t <h2>Take a look at our work to see what we mean</h2> 
 
     <ul> 
 
     \t \t <li><a href="#" class="facebook">facebook</a></li> 
 
       <li><a href="#" class="vimeo">vimeo</a></li> 
 
       <li><a href="#" class="lastfm">lastfm</a></li> 
 
       <li><a href="#" class="linkedin">linkedin</a></li> 
 
       <li><a href="#" class="dribble">dribbble</a></li> 
 
     </ul> 
 
</div> <!-- end of social --> 
 

 
<div class="heroimage"> 
 
\t <img src="img/hero-image.png" alt="hero image"> 
 
</div> 
 

 
<div class="maincontent"> 
 
\t <h2>Risus portacon vestibulum posuere</h2> 
 
    <p>Cray sustainable vegan post-ironic mixtape. 8-bit sustainable sed put a bird on it keytar fingerstache et, ennui street art proident wayfarers viral ethnic. Eu craft beer anim, keffiyeh chambray occaecat jean shorts hella selvage keytar butcher vice in. American apparel pour-over master cleanse, fingerstache etsy qui umami dreamcatcher twee.</p> 
 
    <ul class="bullet"> 
 
    \t \t <li><a href="#">Cray sustainable vegan</a></li> 
 
      <li><a href="#">Chambray occaecat jean shorts</a></li> 
 
      <li><a href="#">Hella selvage</a></li> 
 
      <li><a href="#">Over master cleanse</a></li> 
 
    </ul> 
 
</div><!-- end of maincontent --> 
 

 
<div class="blogspots"> 
 
\t \t <h2>Take a look at our work to see what we mean</h2> 
 
     <div id="sixposts"> 
 
     \t 
 
      <div class="post"> 
 
      \t \t <img src="img/thumb1.png" alt="thumb1"> 
 
      \t \t <h3>Purus Egestas Fusce</h3> 
 
        <p>Cras justo odio, dapibus ac facilisis egestas eget quam.</p> 
 
      </div> 
 
      
 
     <div class="post"> 
 
      \t \t <img src="img/thumb2.png" alt="thumb1"> 
 
      \t \t <h3>Purus Egestas Fusce</h3> 
 
        <p>Cras justo odio, dapibus ac facilisis egestas eget quam.</p> 
 
      </div> 
 
     
 
     <div class="post"> 
 
      \t \t <img src="img/thumb3.png" alt="thumb1"> 
 
      \t \t <h3>Purus Egestas Fusce</h3> 
 
        <p>Cras justo odio, dapibus ac facilisis egestas eget quam.</p> 
 
      </div> 
 
     
 
     <div class="post"> 
 
      \t \t <img src="img/thumb4.png" alt="thumb1"> 
 
      \t \t <h3>Purus Egestas Fusce</h3> 
 
        <p>Cras justo odio, dapibus ac facilisis egestas eget quam.</p> 
 
      </div> 
 
     
 
     <div class="post"> 
 
      \t \t <img src="img/thumb5.png" alt="thumb1"> 
 
      \t \t <h3>Purus Egestas Fusce</h3> 
 
        <p>Cras justo odio, dapibus ac facilisis egestas eget quam.</p> 
 
      </div> 
 
     
 
     <div class="post"> 
 
      \t \t <img src="img/thumb6.png" alt="thumb1"> 
 
      \t \t <h3>Purus Egestas Fusce</h3> 
 
        <p>Cras justo odio, dapibus ac facilisis egestas eget quam.</p> 
 
      </div> 
 
     </div> <!-- end of sixposts --> 
 
</div><!-- end of blogspots --> 
 

 
     <div class="maincontent"> 
 
      <h2>Ornare Tristique Adipiscing Dolor</h2> 
 
      <p>Cray sustainable vegan post-ironic mixtape. 8-bit sustainable sed put a bird on it keytar fingerstache et, ennui street art proident wayfarers viral ethnic. Eu craft beer anim, keffiyeh chambray occaecat jean shorts hella selvage keytar butcher vice in. American apparel pour-over master cleanse, fingerstache etsy qui umami dreamcatcher twee.</p> 
 
      <ul class="bullet"> 
 
        <li><a href="#">Cray sustainable vegan</a></li> 
 
        <li><a href="#">Chambray occaecat jean shorts</a></li> 
 
        <li><a href="#">Hella selvage</a></li> 
 
        <li><a href="#">Over master cleanse</a></li> 
 
      </ul> 
 
     </div><!-- end of maincontent --> 
 

 
<footer> 
 
\t <p>© 2012 All Rights Reserved. Powered by Jeffrey Way Industries</p> 
 
    \t \t \t \t \t <ul> 
 
        \t \t <li><a href="#">about</a></li> 
 
          <li><a href="#">portfolio</a></li> 
 
          <li><a href="#">contact</a></li> 
 
        </ul> 
 
</footer> 
 

 
</div> <!-- end of warp --> 
 
</body> 
 
</html>

回答

0

看起來你已經使用背景圖像列表項,但他們不是在你的代碼輸出中可見。通過從.social ul li刪除float:left然後你會看到div的背景顏色。