非常基本的HTML页面不会显示

时间:2011-12-31 18:43:15

标签: html css

我不确定这里发生了什么,我制作了一个非常基本的HTML / CSS页面,它只是在浏览器中显示一个空白页面。

<HTML>
    <head> 
        <style type="text/css">
        #sidebar {float:left; width:20%;}
        .post {float:right; width:79%;}
        #footer {clear:both;}
    </head>
    <body>
        <div id="header">
            <h1>My interesting life</h1> 
        </div> 
        <div id="sidebar"> 
            <h2>Menu</h2>
            <ul>
                <li>Place Link Here</li> 
                <li>Place Link2 Here</li>  
            </ul>  
        </div>
        <div class="post">
            <h2>Yesterday</h2> 
            <p>Today I drank coffee for breakfast.  14 hours later, I went to bed. </p> 
        </div>  
        <div class="post">
            <h2>Yesterday</h2> 
            <p>Ran out of coffee, so had orange juice for breakfast.  It was from concentrate.</p> 
        </div>
        <div id="footer"> 
            <p><small> This is copyright by Monu.  Contact me to negotiate the movie rights. </small></p>  
        </div>
    </body>
</HTML>

5 个答案:

答案 0 :(得分:9)

您需要关闭<style>标记:

<head> 
    <style type="text/css">
        #sidebar {float:left; width:20%;}
        .post {float:right; width:79%;}
        #footer {clear:both;}
    </style>
</head>

答案 1 :(得分:4)

您没有关闭CSS后的<style>标记。这使得浏览器认为页面的其余部分都是CSS。因此,您需要在CSS之后添加</style>标记。希望有所帮助。

答案 2 :(得分:1)

确实,您必须关闭样式标记。

要在将来快速发现这些错误,请考虑:

(1)使用HTML和CSS验证器,例如http://validator.w3.org/
(2)使用Firebug,一个Firefox扩展,来检查你的代码是否有未封闭的标签或其他奇怪的东西。

答案 3 :(得分:0)

请关闭样式标记。 </style> .........

<style type="text/css">
    #sidebar {float:left; width:20%;}
    .post {float:right; width:79%;}
    #footer {clear:both;}
</style>

使用一些文本编辑器然后它有助于解决这种错误......

答案 4 :(得分:0)

您需要关闭<style>标签。几个开发人员发誓的另一件事是在常规<!DOCTYPE html>标签之前添加<HTML>