如何在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/">Maca>li>
      li>a href="http://www.cnblogs.com/jtjds/">iPada>li>
      li>a href="http://www.cnblogs.com/jtjds/">iPhonea>li>
      li>a href="http://www.cnblogs.com/jtjds/">Watcha>li>
      li>a href="http://www.cnblogs.com/jtjds/">Musica>li>
      li>a href="http://www.cnblogs.com/jtjds/">Contact Usa>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，调用头部和底部文件的方法是：在主页文件代码的开始位置和结束位置分别增加下面的代码: