html引入公共的头部,导航栏,尾部
个人分类: HTML5
很不错的文章,讲解html引入公共的头部,导航栏,尾部的很仔细_
一、asp语言和PHP语言
首先制作一个头部文件head.asp,或者一个底部文件foot.asp。如主页是index.asp,调用头部代码是在index.asp文件代码的开始位置(第一个标记后面,标记前面)增加如下代码:
<!– #include file=”head.asp” –>
调用共用底部文件代码是在index.asp文件代码的结束位置(最后一个标记前面)增加如下代码:
<!– #include file=”foot.asp” –>
如果是PHP文件,文件名改为 footer.php即可。
二、html语言
制作一个共用头部文件head.htm或一个共用底部文件foot.htm。如主页文件是index.htm,调用头部和底部文件的方法是:在主页文件代码的开始位置和结束位置分别增加下面的代码:
<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src=”head.htm” height=“auto” width="100%"></iframe><iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src=”foot.htm” height="auto" width="100%"></iframe>
比如下面的代码主页面:index.html
<!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=utf-8" />
<title></title>
<link href='head.css' rel="stylesheet" type="text/css" />
<script type="text/javascript">
</script>
</head>
<body >
//主页面index.html
<div class='miaov_head'><iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src="head.html" width="100%" height="auto"></iframe>--------这里调用head.html页面,需要使用div包起来,否则样式会发生改变
</div></body>
</html>
单独存放的head.html代码如下:
<!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>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title><link href='head.css' rel="stylesheet" type="text/css" />
</head>
<body ><div class='miaov_head'><ul><li><a href="http://www.cnblogs.com/jtjds/">Mac</a></li><li><a href="http://www.cnblogs.com/jtjds/">iPad</a></li><li><a href="http://www.cnblogs.com/jtjds/">iPhone</a></li><li><a href="http://www.cnblogs.com/jtjds/">Watch</a></li><li><a href="http://www.cnblogs.com/jtjds/">Music</a></li><li><a href="http://www.cnblogs.com/jtjds/">Contact Us</a></li></ul>
</div></body>
</html>
css样式代码如下:
*{margin:0;padding:0;}
body{background:white;position:relative;height:100%;color: #777;font-size: 13px;}
img{border:none;display:block;}
li{list-style:none;text-decoration: none;}
.miaov_head{height:36px;width:100%;margin:0 auto;background: black;margin-bottom: 0px;}
.miaov_head img{width: 30px ;height: 30px;margin-top: 0;margin-left: 130px;}
.miaov_head ul{float: left;width:900px;height: 36px;margin-top: 0px;color: white;position: absolute;top: 0px;margin-left: 200px;}
.miaov_head ul li{float: left;padding-left: 80px;margin-left: 0px;color: white;list-style: none; }
.miaov_head ul li a{color: white;font-size: 14px;text-decoration: none;}
.miaov_head input{position: absolute;top: 5px;margin-left: 1000px;width: 200px;height: 22px;}
.miaov_head a{line-height:36px;color:#777;}
.miaov_head a:hover{color:#555;}
三、script语言–推荐这种
制作一个共用头部文件head.js和一个共用底部文件foot.js。如主页文件是index.htm,调用头部和底部文件的方法是:在主页文件代码的开始位置和结束位置分别增加下面的代码:
比如:head.js文件------根据上面的head.html,利用转换工具:http://tool.chinaz.com/Tools/Html_Js.aspx
html转换为JS:
document.writeln("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
document.writeln("<html xmlns=\"http://www.w3.org/1999/xhtml\">");
document.writeln("<head>");
document.writeln("<style>");
document.writeln("</style>");
document.writeln("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />");
document.writeln("<title></title>");
document.writeln(" <link href=\'head.css\' rel=\"stylesheet\" type=\"text/css\" />");
document.writeln("</head>");
document.writeln("<body >");
document.writeln(" <div class=\'miaov_head\'>");
document.writeln(" <ul>");
document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">Mac</a></li>");
document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">iPad</a></li>");
document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">iPhone</a></li>");
document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">Watch</a></li>");
document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">Music</a></li>");
document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">Contact Us</a></li>");
document.writeln(" </ul>");
document.writeln("</div>");
document.writeln(" ");
document.writeln("</body>");
document.writeln("</html>");
document.writeln("");
以后无论在哪个页面,想调用该头部文件,直接插入head.js文件即可:下面是随便建的一个页面,//MAC.html
<!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>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title><script type="text/javascript" src="head.js"></script>-------------------这里调用head.js
</head>
<body ></body>
</html>
四:shtml文件
1:使用ssi技术页面生成shtml文件,只用在头部文件位置加入 ,然后修改的时候只要修改header.htm文件就可以了。使用shtml的好处是对搜索引擎比较友好,需要处理的文件在服务器端完成的, 不会加重访问者的浏览器负担。
五:本地合并
即将HTML硬拆成头、尾、内容三个部分的文件,在预览或者发布之前用脚本手工合并。很久以前用过,没有后台的时候使用效果不错。
六:ajax动态拉取填充
七:web服务器(比如IIS)中设定包含
比如我们说的SSI,文档后缀名是.shtml的就可以使用include包含。
SSI(Server Side Include),通常称为"服务器端嵌入"或者叫"服务器端包含",是一种类似于ASP的基于服务器的网页制作技术。默认扩展名是 .stm、.shtm 和 .shtml。SSI就是在HTML文件中,可以通过注释行调用的命令或指针,SSI具有 强大的功能,只要使用一条简单的SSI命令就可以实现整个网站的内容更新,时间和日期的动态显示,以及执行shell和CGI脚本程序等复杂的功能。
八:后台模板引擎处理(字符串拼接)
九:用图片、flash等外部资源做—不推荐,比较麻烦
十:angular js里的的使用
差不多在静态的html页面中,引入头部和尾部的文件的方法就这么多,列举了一些,其它的感兴趣的可自行钻研。
转载于:https://www.cnblogs.com/jtjds/p/5326200.html
html引入公共的头部,导航栏,尾部相关推荐
- 官网中如果引入公共的头部导航
1,把公共的导航的部分写在一个html里面,然后用iframe在每个需要的页面引入 <iframe src="header.html" style="width:5 ...
- (转载)微信小程序自定义头部导航栏
本文转载自微信小程序自定义头部导航栏 微信小程序自定义头部导航栏 先看下demo的效果: 最终要实现的效果: 在tabbar页面不显示左侧按钮: 分享出去的页面进入后不显示左侧返回按钮: 点击返回按钮 ...
- 演练 网站的头部导航栏的制作 1014 HTML
演练 网站的头部导航栏的制作 1014 HTML 视频 演练 菜单按钮的制作 HTML5 2216 - 西瓜视频 https://www.ixigua.com/6883480625635033613/ ...
- 微信小程序头部导航栏自定义
微信小程序头部导航栏自定义 参考网址微信开放文档 navigationStyle导航栏样式:仅支持以下值:default默认样式,custom 自定义导航栏,只保留右上角胶囊按钮 配置示例 {&quo ...
- 头部导航栏和底部 图片pic 字体图标设置文字大小
1.头部导航栏和底部 用position: fixed;固定在游览器上面,下方的内容需要margin导航栏的距离,防止下方内容遮住了 2.图片pic 图片用pic套起来,需要给pic设置高宽 3.字体 ...
- 小程序自定义头部导航栏(“navigationStyle“: “custom“),自定义tabBar
一.自定义顶部导航 1.在某些时候,不想要自带的顶部导航栏,需要自己定义,这时可以将自定义的导航栏做成一个组件,然后做一下初始配置,在每个页面引用,初始化,即可得到一个自定义的顶部导航栏: 2.代码部 ...
- 微信小程序实现原生导航栏和自定义头部导航栏
原生导航栏: 可以在 app.json 的 window 属性中或页面的 JSON 文件中设置 navigationBarTitleText(导航栏标题内容).navigationBarTextSty ...
- 制作web网页头部导航栏
(1)新建HTML文件.写入代码. <!DOCTYPE html> <html lang="en"><head><meta charset ...
- mui ios中form表单中点击输入框头部导航栏被推起及ios中form表单中同时存在日期选择及输入框时,日历选择页面错乱bug...
一.ios header导航栏被推起解决方法 1 设置弹出软键盘时自动改变webview的高度 plus.webview.currentWebview().setStyle({ softinputMo ...
最新文章
- 用css3简单实现进度条
- WorkFlow设计篇Step.2—传参的用法-订单金额的处理(续)-WF4.0
- django学习——通过HttpResponseRedirect 和 reverse实现重定向(转载)
- android百分比扩展枯,Android 增强版百分比布局库 为了适配而扩展
- 音乐社交APP源码ios版
- hive外部表改为内部表_hive内部表外部表介绍
- mysql stragg_如何在MySQL中將子查詢行的結果顯示為一列?
- 常识推理相关最新研究进展
- Nginx的location配置详解
- Python Day03
- 教程-delphi的开源json库:superobject,用法简介
- 百度前端学院-基础学院-第二课
- Ruby数据结构-数组和哈希表
- PIC温控器c语言程序,PIC单片机温感器DS18B20 C语言程序代码
- 爬取B站程序猿up主,分析程序猿up出什么类型的视频会受欢迎
- 海思hitool工具使用
- PCBA电路板中电容MLCC失效分析-应力测试作业指导
- python+selenium+autoit实现自动百度识图
- POJ1069 The Bermuda Triangle DFS
- 第1章 弗洛依德——精神分析