多个html怎么导入相同的头部导航，希望大牛指点迷津，感激不尽。。。。
本人再做一个后台管理的UI,有多个html，每个html都有相同的头部和导航拦。导航拦是鼠标划过会弹出菜单，现在是想只写一个头部导航,其他html都引用这个共用的头部导航...
本人再做一个后台管理的UI,有多个html，每个html都有相同的头部和导航拦。导航拦是鼠标划过会弹出菜单 ，现在是想只写一个头部导航,其他html都引用这个共用的头部导航，在线等啊啊
展开
3个回答
展开全部
用div+CSS中的导入样式法，不过比较麻烦，还是 iframe 包含法比较容易方便
追问
能不能详细点啊，iframe不太好控制，因为我这个导航有焦点，还有下拉菜单，研究好几天了，大好人帮帮忙。。。
追答
就是用DIV加样式表，然后导入到你想要的那个网页里边就行了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
赞同下面的方法
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
问题描述：
网站多个静态页面有相同的页头和页尾，排除网站系统自动生成的情况，如果一个每个页面都独立包含页头和页尾，虽然有利于网站的SEO，但这样不利于网站的维护，以及网站加载速度的优化。
解决方法：
针对以上问题，目前有以下几种方法可以解决。
1. iframe 包含法。
页头和页尾分别做成一个页面，然后通过iframe嵌入到调用的页面。这种方法在页头页尾高度固定的时候比较适用，因为当页头页尾高度不固定时，需要iframe根据页面内容自适应高度，比较麻烦。
简单代码结构示例：
<html>
<head>
<title>页面</title>
<style type="text/css">
.page{width:950px;margin:0 auto;}
</style>
</head>
<body>
<div class="page">
<iframe frameboder="0" scrolling="no" width="100%" height="80" src="head.html"></iframe>
<div>页面内容</div>
<iframe frameboder="0" scrolling="no" width="100%" height="80" src="foot.html"></iframe>
</div>
</body>
</html>
2. js包含法
页头和页尾改成外接js的形式，通过documen.write输出或其它js的输出的方法。这种方法在页头页尾需要修改时，不利于修改，也不好还原原先的html结构。
<html>
<head>
<title>页面</title>
<style type="text/css">
.page{width:950px;margin:0 auto;}
</style>
</head>
<body>
<div class="page">
<script type="text/javascript" href="head.js"></script>
<div>页面内容</div>
<script type="text/javascript" href="foot.js"></script>
</div>
</body>
</html>
3. shtml方法
运用服务端的包含方法，只需在页面中使用服务端包含命令<!--# include file="文件名称" -->，在被调用的页面嵌入页头和页脚即可。但此方法需要服务端支持ssi（server side include 服务端包含）功能。
<html>
<head>
<title>页面</title>
<style type="text/css">
.page{width:950px;margin:0 auto;}
</style>
</head>
<body>
<div class="page">
<!--#include file="head.html" -->
<div>页面内容</div>
<!--#include file="foot.html" -->
</div>
</body>
</html>
网站多个静态页面有相同的页头和页尾，排除网站系统自动生成的情况，如果一个每个页面都独立包含页头和页尾，虽然有利于网站的SEO，但这样不利于网站的维护，以及网站加载速度的优化。
解决方法：
针对以上问题，目前有以下几种方法可以解决。
1. iframe 包含法。
页头和页尾分别做成一个页面，然后通过iframe嵌入到调用的页面。这种方法在页头页尾高度固定的时候比较适用，因为当页头页尾高度不固定时，需要iframe根据页面内容自适应高度，比较麻烦。
简单代码结构示例：
<html>
<head>
<title>页面</title>
<style type="text/css">
.page{width:950px;margin:0 auto;}
</style>
</head>
<body>
<div class="page">
<iframe frameboder="0" scrolling="no" width="100%" height="80" src="head.html"></iframe>
<div>页面内容</div>
<iframe frameboder="0" scrolling="no" width="100%" height="80" src="foot.html"></iframe>
</div>
</body>
</html>
2. js包含法
页头和页尾改成外接js的形式，通过documen.write输出或其它js的输出的方法。这种方法在页头页尾需要修改时，不利于修改，也不好还原原先的html结构。
<html>
<head>
<title>页面</title>
<style type="text/css">
.page{width:950px;margin:0 auto;}
</style>
</head>
<body>
<div class="page">
<script type="text/javascript" href="head.js"></script>
<div>页面内容</div>
<script type="text/javascript" href="foot.js"></script>
</div>
</body>
</html>
3. shtml方法
运用服务端的包含方法，只需在页面中使用服务端包含命令<!--# include file="文件名称" -->，在被调用的页面嵌入页头和页脚即可。但此方法需要服务端支持ssi（server side include 服务端包含）功能。
<html>
<head>
<title>页面</title>
<style type="text/css">
.page{width:950px;margin:0 auto;}
</style>
</head>
<body>
<div class="page">
<!--#include file="head.html" -->
<div>页面内容</div>
<!--#include file="foot.html" -->
</div>
</body>
</html>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
