如何在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语言 <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语言--推荐这种 |