为了账号安全,请及时绑定邮箱和手机立即绑定

在网站制作做,怎样统一页头和页脚,最好能有样例代码,谢谢!

在网站制作做,怎样统一页头和页脚,最好能有样例代码,谢谢!

88926761 2014-09-14 18:48:29
在网站制作中,往往页头和页脚是相同的,如果每个页面都写一遍,工作量加大,而且难以维护,我就想能不能所有的页面调用同一个页头和页脚,最好不要用iframe框架,因为ifrmae框架兼容性太差,希望大神给出样例代码,谢谢!
查看完整描述

4 回答

已采纳
?
每天都在变得更好的阿飞

TA贡献2条经验 获得超0个赞

这个问题我来回答一下,最近项目改版就是替换网站的头部。

最好将网站的公共样式和js抽取出来,放到一个公共的jsp或者标签里面。

其他页面只需要引用<include>这个jsp或者引入这个标签。

如果以后要进行改造,只需要修改抽取出来的jsp或者标签就ok啦!

代码例子 :

1:在index.jsp 引入标签

<dufy:platTopImport></dufy:platTopImport>

这个标签中的内容:

<link rel="stylesheet" href="${pageContext.request.contextPath }/static/frontpage/common2/css/global.css">

<!--[if IE 8]>	<link rel="stylesheet" href="${pageContext.request.contextPath }/static/frontpage/common2/css/ie.css"><![endif]-->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/frontpage/common2/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/frontpage/common2/js/jquery.lazyload.js"></script>
<script src="${pageContext.servletContext.contextPath}/static/frontpage/js/bootstrap.js"></script>

2:在index.jsp 中<%@ include  file="" %>

<%@ include  file="test/platTop.jsp" %>

这个jsp中的内容

<%@ page pageEncoding="UTF-8"%>
 <base href="http://${pageContext.request.serverName }:${pageContext.request.serverPort}${pageContext.request.contextPath}/"/>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <%--css样式的引用方式 --%>

 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css"></link>

 <%-- js 样式的引用方式--%>
 
 <script type="text/javascript"  src="${pageContext.request.contextPath}/easyui/jquery-2.1.1.js"></script>


希望可以帮助到你!

查看完整回答
反对 回复 2016-01-27
?
蝌蚪先生

TA贡献12条经验 获得超25个赞

<body>以上为头,</body>以下为尾。这是最基础的页头页脚。。。

如果body内有公用的头模块,那就 公用模块 结束标记 以上为头。

如果body内有公用的尾模块,那就 公用模块 开始标记 以下为尾。

少年,能否看懂?

--我是来赚积分的。

查看完整回答
1 反对 回复 2016-01-23
?
每天都在变得更好的阿飞

TA贡献2条经验 获得超0个赞

忘记了一点,如果有类似这样的底部的话,替换方法和头部类似! 

//img1.sycdn.imooc.com//56a8dd330001760b17870112.jpg

查看完整回答
反对 回复 2016-01-27
?
没有马甲线的安琪拉

TA贡献53条经验 获得超8个赞

可以制作模板文件,套用到网页里

查看完整回答
反对 回复 2014-09-15
  • 4 回答
  • 0 关注
  • 3483 浏览

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号