如何创建页眉/页脚

Question

我是第 1 天的 UI 人员（今天才开始 web 设计），想为我的应用程序设计页眉/页脚（用于我的应用程序中的页面）。

我读到过使用 Javascript/JQuery 我们可以做到这一点，但是在谷歌搜索中我没有找到这样做的简单示例，任何示例/参考都会有很大帮助。

Answer 1

简短的回答是这样的：jQuery 用于 DOM 操作。 页眉和页脚是 DOM 元素。 这就是为什么您可以使用 jQuery 来创建它们的原因。

再长一点：

<body>
 <div id='header'>
 </div>
 <div id='content'>
  This is where you would put all your regular content on your page, 
  maybe if it's dynamically generated content. You just have to supply
  those other two divs all the time (not really - more later)
 </div>
 <div id='footer'>
 </div>
</body>
<script>
  //assuming you have a reference to jQuery in the header
  // first let's build an object.
  var myHeader = $('div').class('headerClassDiv').append('<div class="nestedHeaderClass" />');
  $('#header').append(myHeader);

  // do the same for the footer:
  var myFooter = $('div').class('footerClassDiv').append('<div class="nestedFooterClass" />');
  $('#footer').append(myFooter);
</script>

但这是一个非常人为的例子。 我认为在尝试动态添加内容之前，您需要更多地专注于编写一些好的网页。 特别是如果这是您的第一天。 我的特别建议是使用类似 Visual Studio 设计器环境或类似的东西，在那里你可以同时看到 HTML和视觉效果，并尝试添加元素，并且你阅读了很多关于好的 HTML 设计的东西。

Answer 2

下面的代码示例显示了使用 Javascript 创建页眉和页脚的脚本。

function createHeaderAndFooter() {
    var header="<!--header html-->";
    var footer="<!--footer html-->";
    document.body.innerHTML=header+document.body.innerHTML+footer;
}
window.addEventListener("load", createHeaderAndFooter);

如果您想在所有页面上使用相同的页眉和页脚，您可以将下面的脚本标记放在所有页面上。

<script type="text/javascript src="headerFooter.js"></script>

Answer 3

实际上，页脚不需要 JavaScript。 我遇到了相关问题，因为我正在 100% HTML 站点上工作并且不能包含 PHP 页脚。

有在html文档中制作包含html文档的页脚的解决方案：

<object type="text/html" width=100% height="250" data="footer.html">

Answer 4

尝试使用“js-header”包。 您可以使用 class 创建您的 header，这非常简单。 顺便说一句，它也使用 JQuery。

看这里： JS-Header package

如何创建页眉/页脚

问题描述

4 个解决方案

解决方案1
1 2011-05-14 23:06:02

解决方案2
0 2014-12-13 03:44:22

解决方案3
0 2015-02-15 13:36:35

解决方案4
0 2023-02-01 03:05:43

如何创建页眉/页脚

问题描述

4 个解决方案

解决方案1 1 2011-05-14 23:06:02

解决方案2 0 2014-12-13 03:44:22

解决方案3 0 2015-02-15 13:36:35

解决方案4 0 2023-02-01 03:05:43

解决方案1
1 2011-05-14 23:06:02

解决方案2
0 2014-12-13 03:44:22

解决方案3
0 2015-02-15 13:36:35

解决方案4
0 2023-02-01 03:05:43