-1

我遇到了一些奇怪的问题。我正在尝试创建一个黑框,它将作为视频和一些文本的背景,但是在我输入 CSS 后,黑框不会出现。不仅如此,我还尝试将 .videoBlock div 作为评论。在那我发现 .dwBlock div 之后的任何代码似乎都不适用于 CSS。例如,在我将 .videoBlock div 标记为评论后,页脚消失了。请任何帮助将不胜感激!非常感谢!!这是我的 HTML:

<div class="wrapOverall">
  <div class="header">
    <div class="navMain">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">About</a></li>            
        </ul>
    </div><!--End of navMain-->
  </div><!--End of header-->
  <div class="wrapBlocks">
    <div class="psBlock"></div><!--End of psBlock-->
    <div class="dwBlock"></div><!--End of dwBlock-->
  </div><!--End of Overall block wrap-->
  <div id="videoblock"></div><!--End of videoBlock-->
  <div class="footer">
    <div class="social"></div><!--End of social-->
  </div><!--End of footer-->
</div><!--End of wrapOverall-->

这是我的CSS:

.wrapOverall {
background:url(images/bg_main.png);
background-repeat:repeat-x;
width:1024px;
height:1024px;
}
.header {
height:176px;
background:url(images/bg_header.png);
background-repeat:repeat-x;
}
.navMain {
}
.wrapBlocks {
margin-top:28px;
}
.psBlock {
height: 235px;
width: 512px;
float:left;
background:url(images/bg_ps.png);
background-repeat:repeat-x;
}
.dwBlock {
height: 235px;
width: 512px;
float:right;
background:url(images/bg_dw.png);
background-repeat:repeat-x;
}
.videoblock {
width: 993px;
height: 348px;
background-color:#000;
}
.footer {
width: 1024px;
height:176px;
background:url(images/bg_header.png);
background-repeat:repeat-x; 
}
4

2 回答 2

2

问题在于您的 CSS 而不是您的 html 代码,您使用的是 id="videoblock" 但在您的 CSS 中,您被引用为类 .videoblock, change 。通过 # 在你的 CSS 中,如 #videoblock 并且工作正常。

#videoblock {
width: 993px;
height: 348px;
background-color:#000;
}

你可以在这里查看演示:

于 2013-08-15T16:29:15.643 回答
0

浮动元素正在产生问题,尝试为它们提供清晰的基础。

  <div class="wrapBlocks">
    <div class="psBlock"></div><!--End of psBlock-->
    <div class="dwBlock"></div><!--End of dwBlock-->
    <div style='clear:both'></div> <!-- above two float element is causing this issue -->  
  </div>
于 2013-08-15T16:21:03.117 回答