Question

我刚开始为自己开发个人主页。一切顺利，直到我想在菜单边框和标题之外写入文本（这意味着页面的某个中心）。如果我在HTML文件中添加任何段落，它实际上会移动菜单项和＆amp;标题然后放置文本。我不知道出了什么问题。

        <!--
    All the html code will go in this file. This is the main core file of any website.
    -->
    <!DOCTYPE html>
    <html>
    <head>
    <html lang="en">
    <html charset="utf-8">
    <title>Welcome to Fatah's world!</title>
    <link rel="stylesheet" href="main_design.css"/>

    <!--<img src="bricks.JPG" alt="blue bricks" width="300" height="1000">-->
    <style type="text/css">

    </style>
    </head>

    <body>
    <p>This is a paragraph i am trying to place in my page, but it doesn't stay in the accurate position.</p>

    <h1 id="style_header">Welcome to my green world!</h1></div>


    <div id="menu_area" >

    <div id="home">HOME</div><br /><br /><br /> 
    <div id="about_me">ABOUT ME</div><br /><br /> <br />
    <div id="gallery">GALLERY</div><br /><br /> <br />
    <div id="contact_me">CONTACT ME</div><br /><br /> <br />
    <div id="my_diary">MY DIARY</div><br /><br /> <br />
    <div id="blog">BLOG</div><br /><br /> <br />

    </div>

    <div id="footer">Developed by Jabir Al Fatah</div>

   </body>



        /*
    All the css properties will go in this file. CSS properties design the site to look it prettier.
    */
    #style_header{
    background-color:blue;
    text-align:center;
    padding:20px;
    margin:-8px;
    border:4px solid red;

    }

    #paragraph{
    text-align:center;

    }

    #menu_area{
    border:4px solid red;
    margin:-8px;
    background-color:#FFD700;
    padding-top:30px;
    margin-top:4px;
    height:600px;
    width:150px;


    }
    body{
    background-image:url(green.JPG);
    background-repeat:no-repeat;
    }

    #footer{
    background-color:blue;
    margin:-8px;
    border:2px solid red;

    text-align:center;

    }

    #home{
    font:bold 20px Tahoma;
    text-align:left;
    }

    #about_me{
    font:bold 20px Tahoma;
    text-align:left;
    }
    #gallery{
    font:bold 20px Tahoma;
    text-align:left;
    }
    #contact_me{
    font:bold 20px Tahoma;
    text-align:left;
    }
    #my_diary{
    font:bold 20px Tahoma;
    text-align:left;
    }
    #blog{
    font:bold 20px Tahoma;
    text-align:left;
    }
   </html>

Answer 1

如果您在p和header之前添加menu-area，它会显示在header和menu-area之前，如果您希望它出现在header之后{1}}和menu-area，在它们之后添加

<h1 id="style_header">Welcome to my green world!</h1></div>


<div id="menu_area" >

<div id="home">HOME</div><br /><br /><br /> 
<div id="about_me">ABOUT ME</div><br /><br /> <br />
<div id="gallery">GALLERY</div><br /><br /> <br />
<div id="contact_me">CONTACT ME</div><br /><br /> <br />
<div id="my_diary">MY DIARY</div><br /><br /> <br />
<div id="blog">BLOG</div><br /><br /> <br />

</div>

<p>This is a paragraph i am trying to place in my page, but it doesn't stay in the accurate position.</p>

<div id="footer">Developed by Jabir Al Fatah</div>

PS：如果您希望p显示在menu-area旁边而不是display旁边，请将menu-area和p的{{1}}更改为{{1} }}

类似这样的事：http://jsfiddle.net/ZCmg8/

更新：http://jsfiddle.net/ZCmg8/1/

为什么不能在HTML的页面中心添加任何段落？

1 个答案: