Question

嗨，我正在尝试创建一个非常简单的页面，但我迷路了。我的想法是用这种结构创造一些东西 http://i57.tinypic.com/4r49ia.jpg 非常简单......每种颜色都是彼此重叠的。黑色矩形是唯一的硬件，是youtube视频的空间。

我做了这个代码，但它只是搞砸了

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="margin:0; padding:0; text-align:center; color:white;” >

<div id="container” style=“margin:0; padding:0; text-align:center;” >

 <div id="header" style="background-color:green; height:110px;width:2000px;">
 </div>

 <div id="menu" style="background-color:blue; height:70px;width:2000px;”>
  <p>text here</p>
 </div>

 <div id=“content” style="background-color:red; text-align:center; height:800px;width:2000px;”>
 # here goes youtube video #
 </div>

 <div id="footer" style="background-color:yellow;height:200px;width:2000px; ">
 </div>

</div>

</body>
</html>

我做错了什么？请帮帮我。

我得到绿线，然后是蓝线（但没有文字），红色区域完全是使命。然后是黄色的div ...为什么？

Answer 1

看起来你正在使用常规报价的混合 - ＆gt; “以及Mac有时会放入的'聪明的报价'（如果我不得不猜）。看看保证金之前和白色之后的报价如何;不匹配

<body style="margin:0; padding:0; text-align:center; color:white;” >

将“智能引号”更改回正常引号应该可以解决您的问题，并右键单击您的编辑器，并关闭“替换/智能引号”可以防止它再次发生。

Answer 2

不确定您使用的是哪种编辑器，但是：'''和'这''''的标志不一样......

 <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <body style="margin:0; padding:0; text-align:center; color:white;" >

    <div id="container" style="margin:0; padding:0; text-align:center;" >

     <div id="header" style="background-color:green; height:110px;width:2000px;">
     </div>

     <div id="menu" style="background-color:blue; height:70px;width:2000px;">
      <p>text here</p>
     </div>

     <div id="content" style="background-color:red; text-align:center; height:800px;width:2000px;">
     # here goes youtube video #
     </div>

     <div id="footer" style="background-color:yellow;height:200px;width:2000px;">
     </div>

    </div>

    </body>
    </html>

这样可以 - 你必须修复p标签的空白空间（由填充/边距引起）。

Answer 3

首先你必须在布局中使用margin或float，第二个为什么你要使用如此大的像素值

<div id="main" style="width:960px;margin:0px auto;">
        <div id="hdr" style="float:left;width:100%;height:130px;background:orange;">
            header
        </div>
        <div id="bdy" style="float:left;width:100%;height:500px;background:green;">
            body
        </div>
        <div id="ftr" style="float:left;width:100%;height:80px;background:#cccccc;">
            footer
        </div>
    </div>

Answer 4

这可能是因为“宽度：2000px;”。你无法在低分辨率屏幕上看到它。试试例如：

    <!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="margin:0; padding:0; text-align:center; color:white;” >

<div id="container” style=“margin:0; padding:0; text-align:center;” >

     <div id="header" style="background-color:green; height:110px;width:200px;">
         dfdasfasd
     </div>

     <div id="menu" style="background-color:blue; height:70px;width:200px;”>
      <p>text here</p>
     </div>

 <div id=“content” style="background-color:red; text-align:center; height:800px;width:200px;”>
 # here goes youtube video #
 </div>

 <div id="footer" style="background-color:yellow;height:200px;width:200px; ">
 </div>

</div>

</body>
</html>

情人节快乐^ _ ^

Answer 5

用此

替换body标签

<body style="margin:0; padding:0; color:white;">

Answer 6

我确认这来自您的"字符。

DEMO

基本的html / css布局无法正常工作

6 个答案: