wordpress 洛米,免费网站seo优化,贵阳网站开发zu97,即墨网站建设公司HTML公用部分抽离出来使用,使后期维护起来更加方便 创建一个index.html页面, 和common文件夹(用来存储公用页面部分)
header.html
<header class"mui-bar mui-bar-nav"><h1 class"mui-title">头部公共部分</h1>
</header>foote…
HTML公用部分抽离出来使用,使后期维护起来更加方便
创建一个index.html页面, 和common文件夹(用来存储公用页面部分)
header.html
<header class="mui-bar mui-bar-nav"><h1 class="mui-title">头部公共部分</h1>
</header>
footer.html
<footer>底部公用内容</footer>
index.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML页面公共部分方法</title></head><style type="text/css">body {text-align: center;}</style><body><!-- jquery - load方法() 添加公用部分 --><!-- 创建一个id为header的div --><div id="header"></div><center><p>我们在每天早上 <time>9:00</time> 起床。</p></center><!-- 创建一个id为footer的div --><div id="footer"></div><!-- 引入jq --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script type="text/javascript">// 1: 直接使用load减少明显的卡顿效果 (可以搭配animate 进行优化) $('#header').load('common/header.html');$('#footer').load('common/footer.html');// 2: $(document).ready(fn) 的方法是当document DOM 结构加载完之后触发的的. 并非是等到页面数据全部渲染完毕之后触发的. $(document).ready(function() {}) 等价于 $(function(){}), 两者写法不同而已.$(document).ready(function() {$('#header').load('common/header.html');$('#footer').load('common/footer.html');})</script></body>
</html>
jQuery load() 方法 详细介绍
经过测试发现使用该方法,可以完成公用顶部底部代码. 但是会出现一个问题! 页面刷新的时候,会有一段时间,div高度塌陷. 等数据请求完之后才会正常.
解决方达:
<!-- 定高, 添加animate 动画效果 --><div id="header" class="animated fadeInDown" style="height: 230px;"></div>
踩坑： 使用 jq.load() 本地直接打开文件会报错! 公用部分不会加载出来, 必须要本地启动项目才能加载文件. webstorm可以直接启动,vscode需要Liveserve 启动才可以
