Question

我有一个index.php文件，我正在尝试在其中包含页眉和页脚（html文件）。它们都是基于引导程序的，我只是在header.html中进行了一些自定义。如果我只包含头文件，则根本没有问题，index.php显示为预期，但当我包含两个文件（hearder / footer.html）时，由于某种原因，我的css不显示更改（仅显示引导程序的默认值。这是我想解决的问题。我也会问另一个问题：

我有几个页面具有相同的页眉和页脚。这里的目标不是重复代码。这是更好的包含方式吗？这些元素（页眉/页脚）？我做得对吗？

这些是我正在使用的文件：
- This pen显示应该在index.php文件中显示的修改。
- This file代表主文件（index.php）
- This file包含header.html
- This file包含footer.html

我意识到，如果我在主文件footer.html中评论index.php的包含内容，则会显示内容并且一切正常。

Answer 1

实际上，您的 footer.html还包含覆盖header.html样式表的CSS样式表。

你可以做这样的事情

* header.html中

<html>
<head>
 add all the stylesheets here or combine them
</head>
<body>
<navigation>
</navigation>

* footer.html

<footer information goes here>
add javascript here

</body>
</html>

*的index.php

include ('header.html')

content goes here

include('footer.html')

Answer 2

您的页眉和页脚在加载时会重置CSS。您只需要在标题中链接您的CSS。可以将其想象为创建3个文档中的1个文档，您只需要引用一次该文档。

使用此PHP包含您的文件，然后修复您的HTML文件

<?php 
    require_once ('header.html');
?>

//do stuff

<?php 
    require_once('footer.html'); 
?>

在标题中

    <!DOCTYPE html>
<html>
<head>
    <title>Header</title>
    <meta charset="UTF-8">         

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <link rel="stylesheet" type="text/css" href="../css/navbar.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-WDM-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                 <a class="navbar-brand" href="#">
                    <img alt="Brand" src="../img/fb_favicon.jpg">
                 </a>
            </div>

            <div class="collapse navbar-collapse" id="bs-WDM-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="./index.php">home</a></li>
                    <li><a href="./about.php">about</a></li>
                    <li><a href="./projects.php">projects</a></li>
                    <li><a href="./contact.php">contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

这里是您的主要内容放置在哪里

//Do Stuff

在你的页脚

footer class="footer">
                <div class="container">
                    <div class="col-md-4">
                        <p>Copyrights</p>
                    </div>
                    <div class="col-md-8">
                        <p>links here</p>
                    </div>
                </div>
            </footer>  
        </body>
    </html>

是否可以在同一个php文件中包含2个html页面？

2 个答案: