html - 模板 html 页面

标签 html css

大家好,我是网络编程的新手。我想创建一种 CSS 模板,其中除了页面内容外,所有页面看起来都一样。

所以我在顶部有一个 Logo 和一些选项卡,您可以在其中浏览网站,但页面的内容会有所不同(联系、关于、信息等)。

我该如何着手创建这个模板?

最佳答案

您可能想尝试使用纯 HTML + CSS 构建您的模板页面,然后使用简单的 PHP 包含来构建您的页面。例如,您可以将页面分成两个单独的文件:

header.php:

<!DOCTYPE html>
<html>
    <head><title>Hello World</title></head>
    <body>
        <div id="main-content">

和 footer.php:

        </div>
    </body>
</html>

然后,对于使用该模板的任何文件,您将使用如下内容:

<?php include("header.php"); ?>

<!--All the content of your page goes here-->
<h1>Hello World!</h1>
<p>Lorem Ipsum</p>

<?php include("footer.php"); ?>

那么如果有人访问了之前的文件(假设它叫做 index.php),那么这些文件将被组装起来,最终的 HTML 输出将类似于:

<!DOCTYPE html>
<html>
    <head><title>Hello World</title></head>
    <body>
        <div id="main-content">

        <!--All the content of your page goes here-->
        <h1>Hello World!</h1>
        <p>Lorem Ipsum</p>

        </div>
    </body>
</html>

只要确保您的服务器上运行着 PHP,否则它根本无法工作。另外,如果您想在本地开发网站,我建议您使用 XAMPP获取本地 Apache 主机。

关于html - 模板 html 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3225159/

相关文章:

html - Twitter Bootstrap 响应时间(有点困惑)

html - html 的编码风格

html - 李 :hover won't change sprite position

css - 如何在 CSS 中的 Bootstrap 面板标题后插入 HTML 符号?

HTML:如何更改按钮的大小,使其与按钮上的图标大小相同?

javascript - Jquery clone() 不会克隆使用 data() 设置的新值

javascript - 如何使用 Chrome 控制台导航到 bing.com 并输入搜索文本?

javascript - 关闭 Div - 淡出?

html - 单选按钮作为图像覆盖 Bootstrap 列

javascript - onload 添加类 animate.css