html网页共用头部和脚部,如何在HTML不同的页面中,共用头部与尾部?_html/css_WEB-ITnose...

一、asp语言和PHP语言

首先制作一个头部文件head.asp,或者一个底部文件foot.asp。如主页是index.asp,调用头部代码是在index.asp文件代码的开始位置(第一个标记后面,标记前面)增加如下代码:

调用共用底部文件代码是在index.asp文件代码的结束位置(最后一个标记前面)增加如下代码:

如果是PHP文件,文件名改为 footer.php即可。

二、html语言

制作一个共用头部文件head.htm或一个共用底部文件foot.htm。如主页文件是index.htm,调用头部和底部文件的方法是:在主页文件代码的开始位置和结束位置分别增加下面的代码:

比如下面的代码主页面:index.html

//主页面index.html

--------这里调用head.html页面,需要使用div包起来,否则样式会发生改变

单独存放的head.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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值