Question

我有两个名为header.php和footer.php的php页面。它们将用于为我拥有的每个页面添加页眉和页脚。因此，我只需要将它们包含在每个页面中。但问题是，当我尝试在中间部分添加内容时，它直接位于标题部分下。这种行为的原因是什么？

在这个特定代码中，h1标签不可见。它位于标题部分下面。

的index.php：

<?php
   include('header.php');
?>
   <h1>This is my page</h1>
 <?php
   include('footer.php');
 ?>

的header.php：

<html>
<head>
<style>


</style>
</head>
<body>

<div id='head'>
   <span ><a href='#' id='top'>MyPHP</a></span>
   <ul id='huls'>
      <li><a href='#'>home</a></li>
      <li><a href='#'>FAQ</a></li>
      <li><a href='#'>Log in</a></li>
      <li><a href='#'>About us</a></li>
   </ul>
</div>

footer.php：

<div id='footer'>
   <div id='col1' class='fdiv'>
       <ul>
          <li><a href='#'>faq</a></li>
          <li><a href='#'>faq</a></li>
          <li><a href='#'>faq</a></li>
          <li><a href='#'>faq</a></li>
        </ul>
    </div >
       <div id='col2' class='fdiv'>
       <ul>
          <li><a href='#'>faq</a></li>
          <li><a href='#'>faq</a></li>
          <li><a href='#'>faq</a></li>
          <li><a href='#'>faq</a></li>
        </ul>
    </div >
       <div id='col3' class='fdiv'>
       <ul>
          <li><a href='#'>faq</a></li>
          <li><a href='#'>faq</a></li>
          <li><a href='#'>faq</a></li>
          <li><a href='#'>faq</a></li>
        </ul>
    </div>
       <div id='col4' class='fdiv'>
       <ul>
          <li><a href='#'>faq</a></li>
          <li><a href='#'>faq</a></li>
          <li><a href='#'>faq</a></li>
          <li><a href='#'>faq</a></li>
        </ul>
    </div >
</div>
</body>
</html>

的CSS：

   *{
     margin:0px;
     padding:0px;
   }
    span{
       position:relative;
       display:inline;
       left:20px;
       float:left;

   }
    #head{
        position:absolute;
        width:100%;
        height:70px;
        background:skyblue;
        top:0px;
        clear:both;
    }
    #huls li{
       float:right;
       margin-right:30px;
       list-style-type:none;
    }
    #huls a{
       font-size:23px;
       color:white;
       text-decoration:none;
    }
    span #top{
       font-size:35px;
       text-decoration:none;
       color:white;

    }  
     #footer{
         width:100%;
         height:170px;
         position:absolute;
         background:crimson;
         bottom:10px;
      }
      .fdiv{

         width:24%;
         height:100%;
         position:relative;
         float:left;

         text-align:center;

      }
      #footer a{
        text-decoration:none;
        color:white;
        font-size:17px;
      }
      #footer li{
        list-style-type:none;
      }

Answer 1

删除position:absolute;上的#head，然后就可以了。

使用php将html页眉和页脚部分添加到特定页面

1 个答案: