html中引用公共header footer等

最新推荐文章于 2023-09-29 04:54:32 发布

small_animation

最新推荐文章于 2023-09-29 04:54:32 发布

阅读量3.2k

点赞数

分类专栏： header 文章标签：公共头部header

本文链接：https://blog.youkuaiyun.com/small_animation/article/details/93975444

版权

header 专栏收录该内容

2 篇文章

订阅专栏

<!--新建一个放公共header.html和footer.html两个文件-->
<!--新建的文件里面"只写入"公共的代码部分 不要其他的代码片段或标签 比如:body html标签等-->
<!-- header.html-->
    <div class="header">
	<div class="logo">
		<a href="index.html"><img src=""/></a>
	</div>
	<div class="login">
		<a href="person_center.html" >个人中心</a>
		<a href="login.html" >登录</a>
		<a href="register.html" >注册</a>
		<a href="#" >退出</a>
		<a href="">
			<span><img src="web/img/charge.png" alt="" /></span>
			<span class="name">大灰狼</span>
		</a>		
	</div>
</div>
<!-- 需要公共头部的文件 -->
<!-- index.html-->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>首页</title>
	</head>
	<body>
		<div id="header"></div><!--引入的公共头部-->
		<div class="content"></div>	
	</body>
	<script type="text/javascript" src="web/js/jquery-2.2.4.js"></script> <!--js文件-->	
	<script type="text/javascript">
		$("#header").load("header.html");<!--需用js把公共头部加载到当前页面-->
	</script>
</html>