Question

我为网站的索引创建了一个顶栏和一个底栏。我已将它们分别保存在两个文件中，header.php控制顶栏，footer.php控制底栏。

在索引中没有问题，但是如果我创建一个像about.php这样的新页面，并且我包含了两个php文件，则顶部和底部栏会向右移动10px（或类似的东西）。

在这种情况下，页面较大，因为在两个小节开始之前左边有一个很小的空白区域。

以下是两个文件：

的header.php

<style>
.blue { background-color: #039; width: 100%; height: 15%; position: absolute; top: 0px; } 
html, body { width: 650px; background-color:#F5F5F5;}
</style>

<div class="blue">
    <h1 style="text-align: center; color:#FFFFCC ;font-family:"Times New Roman",Times,serif;">My Website</h1>
</div>

Footer.php

<ul id="figo">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>


<style> 
#figo {background-color: #039; position:absolute; bottom:0px; width:100%;}
ul{
  list-style-type:none;
  margin:0;
  padding:0;
  overflow:hidden;
}

li{
  float:right;
}

a{
  display:block;
  width:90px;
  color:#FFFFCC;

}
</style>

的index.php 这里我发布了index.php

-

 <html> 

   <head> <title> About </title> </head> 

   <body> 



   <? include 'header.php'; ?>

   <?include 'footer.php'; ?>


   </body> 

   </html>

Answer 1

<style></style>代码只能进入文档的<head></head>部分。您还希望避免使用任何内联样式。比使用<style></style>更好，您应该将所有页面使用的所有样式放入单个样式表中。

我会实现一个包装器（容器）并将页面宽度和位置设置为相对，这会将页脚菜单对齐到该块的底部（假设这是您要实现的目标）。如果没有，请从容器中放下位置。

通过所有这些更改，结构看起来像这样。请记住，这是一个非常古老的设计，但它应该有助于您开始。的header.php：

<!DOCTYPE html>
<html>
<head>
<title><?php echo $title; ?></title>
...
<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" />
...
</head>
<body>
<div id="container">
    <div class="blue" id="header">
        <h1>Header Content</h1>
    </div>

的index.php / about.php / whatever.php ...

<?php
$title = 'My About Page';
include('header.php');
?>
    <div>Your page contents</div>
<?php include('footer.php'); ?>

footer.php：

    <div id="footer">
        <ul id="figo">
            <li><a href="#home">Home</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#about">About</a></li>
        </ul>
    </div>
</div><!-- end "container" -->
</body>
</html>

/css/stylesheet.css：

body {
    background-color: #F5F5F5;
    margin: 0;
    padding: 0;
}

#container {
    position: relative;
    width: 650px;
}

.blue {
    background-color: #039;
    height: 15%;
}

#figo {
    background-color: #039;
    position: absolute;
    bottom: 0px;
    margin: 0;
    padding: 0;
    width: 100%;
}

#figo ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#figo li {
    float: right;
}

#figo a {
    display: block;
    width: 90px;
    color: #FFFFCC;
}

Answer 2

杀死你的.blue顶栏上的绝对位置。你不需要它;因为它位于HTML的顶部，所以它将位于页面的顶部。 [该空间可能是body上默认填充的结果。]尝试这样的CSS：

html, body { background-color:#F5F5F5; margin: 0; padding: 0; }
.blue { background-color: #039; height: 15%; }

可以肯定的是，我们需要看看index.php和footer.php。

为什么要在html和body元素上设置宽度？那有点时髦。如果您想要一个带有灰色背景的600px宽的内容区域，请创建一个包装div并将背景应用于：

#wrap { background: #f5f5f5; width: 600px; }

<body>
    <div id="wrap">
    <?php require "header.php"; ?>
    content here
    <?php require "footer.php"; ?>
    </div>
</body>

此外，style元素应作为head元素的子元素放置。或者，更好的是，在外部样式表中，将表示与内容分开。

Answer 3

你在左边填充的原因是因为你有＆lt; html＆gt;在header.php以及要加载头文件的页面上。

此外，将页眉和页脚放入服务器中的更高级别文件夹是更好的做法。然后用

引用该文件

Include("../../header.php");

在一个或两个样式表中的样式也是完成样式的最佳方式。您需要按父类和类或ID引用文档中的节点。这将允许您在不同的页面上获得不同的样式，但有一个样式表。

<div class='parent'>
    <div class='child'>
         //do stuff
    </div>
</div>

然后用

样式

<style type='text/css'>
    .parent .child{
        cool:stuff;
    }
</style>

最后，确保样式仅显示在＆lt; head＆gt;内。页面： - ）

包括footer.php和header.php

3 个答案: