基本的HTML/CSS布局不工作

嗨我想创建一个非常简单的页面，但我迷失在某个地方。我的想法是创建这个结构的东西 http://i57.tinypic.com/4r49ia.jpg 很简单...每种颜色都是一个div.one在另一个之上。黑色矩形是唯一的硬件部分，是YouTube视频的空间。基本的HTML/CSS布局不工作

我这样做的代码，但它只是搞的一团糟

<!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 ...为什么？

来源

2014-02-14 user3309268

你应该考虑在外部css文件中编写你的css。使阅读和组织更容易。 – ElliotSchmelliot

你有关于内容的奇怪引号。也许问题来自那里。 – franchez

首先你必须为使用保证金或漂浮在布局，第二你为什么要使用这么大的像素值

<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>

来源

2014-02-14 07:48:11 scripter

你是惊人的人！我被困在这从5小时 – user3309268

最后一件事。如果我从youtube复制视频（我做了古典的东西...共享，复制代码并将其粘贴到我的div）我只是得到一个空白区域，但从来没有加载。为什么？ – user3309268

如果我不在像素中添加宽度，则不会显示div – user3309268

它看起来像你使用常规报价的混合 - >“和“智能引号”该MAC有时放入（如果我猜）了解如何保证金前后白色报价;不符合

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

更改“智能引号”恢复正常的报价应该可以解决您的问题，并右键点击您的编辑器并关闭Substitutions/Sma rt行情应该防止它再次发生。

来源

2014-02-14 07:48:33 sam

不知道你所使用的编辑器，但是：““”，这“””不一样的迹象...

<!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>

这将工作 - 你必须解决空的空间（由于通过

来源

2014-02-14 07:49:00 sinisake

p标签的填充/保证金）这可能是因为“宽度：2000像素;”你不能看到它在低分辨率的屏幕尝试，例如：

<!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>

情人节快乐^ 。 _^

来源

2014-02-14 07:49:43

代替body标签与此

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

来源

2014-02-14 07:50:15 PravinS

我确认这是来自您的" caracters。

DEMO

来源

2014-02-14 07:51:36 franchez

基本的HTML/CSS布局不工作

回答

相关问题