如何创建页眉/页脚

How to create Header/Footer

本文关键字：页脚 创建 何创建      更新时间：2023-09-26

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

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

简短的回答是这样的：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设计的东西。

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

有解决方案可以使页脚在html文档中包含html文档：

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

下面的代码示例显示了使用 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>

尝试使用 "js-header"-package。您可以使用类创建标题，这非常简单。顺便说一下，它也使用JQuery。

看这里：JS-标头包

相关文章：