将多个html页面里引进相同的一个头部页面，应该怎么做

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了将多个html页面里引进相同的一个头部页面，应该怎么做相关的知识，希望对你有一定的参考价值。

之前页面都是用的php,t头和脚都可以引进来，效果也ok。可是现在我将页面全都改成了html页面 不知道怎么引进来 用了 Iframe将头部和页脚引进来了 ，可是点击不跳转页面，所以很苦恼应该用什么正确的方法，，，，

    将多个html页面里引进相同的一个头部页面的方法如下：

    1. iframe 包含法。
    页头和页尾分别做成一个页面，然后通过iframe嵌入到调用的页面。这种方法在页头页尾高度固定的时候比较适用，因为当页头页尾高度不固定时，需要iframe根据页面内容自适应高度，比较麻烦。
    简单代码结构示例：
    <html>
    <head>
    <title>页面</title>
    <style type="text/css">
    .pagewidth: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">
    .pagewidth: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">
    .pagewidth:950px;margin:0 auto;  
    </style>
    </head>
    <body>
    <div class="page">
    <!--#include file="head.html" -->
    <div>页面内容</div>
    <!--#include file="foot.html" -->
    </div>
    </body>
    </html>

 参考技术A 1、新建一个header.html头部文件
2、在你说的多个html页面引入即可
示例：index.html文件引入公用头部header.html
在index.html文件开始加入：<include file="header.html" />
file内填写的是你需要引入的文件的详细地址，可以是相对地址，也可以是绝对地址！追问

出不来啊

追答

地址之类的对不对？贴出代码来....include标签最后的斜杠 / 不要忘记了

追问



追答

额....错了，习惯了用框架，习惯了用include....
你单纯的html是不能直接用include的
你只能用iframe去导入另外的页面了....

追问

哈哈~好吧~ 我之前用了iframe，可是点击页面不跳转

追答

因为你点击的是当前的iframe，你需要跳出这个iframe，到这个iframe的parent上去才能跳转出来！这一块你可以用js绑定一些click操作！需要的话，我待会儿给你个简单的Demo！

本回答被提问者采纳 参考技术B 1、<jsp:include page="/common/wx_portalLeft.jsp">
<jsp:param value="" name="menu" />
</jsp:include>

2、 <%@ include file="/common/frontconditionturnpage.jsp"%>

3、<c:import url="$innerahstudyUrl/course/manage/tutor!list.excsec?id=$curUser.id">
<c:param name="tutorUserIds" value="$tutorIds"></c:param>
</c:import>追问

直接在html页面里可以引jsp吗，怎么出不来啊

如何设置CSS 让页面头部和底部固定 中间内容滚动?

就是头部贴页面顶部，底部贴页面底部。全屏的时候，刚好页面是没有滚动条的。
当页面缩小的时候，头部和底部还是固定在两头，让中间部分产生滚动条。

页面分成了三个部分，三个部分分开写在不同的页面里，然后调用。整体是这样的模式：
<div>
<% Html.RenderPartial("HeadUserControl"); %>
</div>

<div>

<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>

<div>
<% Html.RenderPartial("FootUserControl"); %>
</div>

怎麼弄也弄不好，朋友们救救命啊！先谢谢了！

　　底部和头部分别定义两个div，在利用position:fixed;分别设置它们的位置。

　　position 属性规定元素的定位类型。
　　说明
　　这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

　　fixed
　　生成绝对定位的元素，相对于浏览器窗口进行定位。
　　元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
　　 参考技术A I服了楼上的YOU们！

<style type="text/css">
<!--
html,body height: 100%;
body
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;

.top,.bottom
position: absolute;
width: 100%;
left: 0px;
height: 10%;
background-color: #000000;

.top top: 0px;
.bottom bottom: 0px;
.main
background-color: #00CC66;
overflow-y: scroll;
position: absolute;
top: 10%;
bottom: 10%;
height: 80%;
width: 100%;

-->
</style>
</head>

<body>
<div class="top">TOP</div>
<div class="bottom">BOTTOM</div>
<div class="main">CONT</div>
</body>

如果你要固定高度，将10%转换一下数值就可以了。具体的CSS写法忘了，你去查查了。 参考技术B <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
body
margin:0;
padding:0;

.top
position:fixed;
left:0;
top:0;
height:100px;
width:100%;
background:#000;

.main

background-color: #00CC66;

height: 1000px;
margin-top:100px;
margin-bottom:100px;
padding-bottom:20px;
width: 100%;

.bottom
position:fixed;
left:0;
bottom:0px;
height:100px;
width:100%;
background:#000;

/*IE6 fixed bug*/
* htmloverflow:hidden;
* html bodyoverflow:auto;margin:0;
* html .bottomposition:absolute;left:0;bottom:0px;
* html .topposition:absolute;left:0;top:0px;
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div class="top">TOP</div>
<div class="main">
CONT
CONT
CONTCONT
CONT
CONT
CONT
<div style="margin-top:980px;color:#fff;">底部</div>
</div>
<div class="bottom">BOTTOM</div>
</body>
</html>

参考资料：http://www.losever.com/?s=div%2Bcss

本回答被提问者采纳 参考技术C DIV做这样的要配合JS，你用框架集做吧！效果一样的，你搜frameset ！ 参考技术D 页面头部和底部的css样式用 position:fixed;

以上是关于将多个html页面里引进相同的一个头部页面，应该怎么做的主要内容，如果未能解决你的问题，请参考以下文章

html里怎么引用一个html的头部

html里怎样公用头部

在jsp页面中用<%@ include file="head.txt"%>引用其他文件的代码，但是引用的那部分出现中文乱码，应该怎

idea如何导入本地已经写好的前端页面代码？

页面中多个iframe是不是会影响性能？

如何在同一个html文件中为多个页面使用相同的标题