资讯专栏INFORMATION COLUMN

HTML静态页面引用公共的头部和底部(目前亲测的几种静态页面方法)

tigerZH / 3476人阅读

摘要:亲测方法三会出现滚动条。个人认为方法一在静态页面中的使用比较合适

这里不提iframe,主要因为设计网页相对比较困难,占用线程较多,速度慢,而且也不利于搜索引擎的对头尾的收录
方法一:通过load()函数,分别引入公共头部和底部文件;
header.html 顶部页面


    
        
    
    
       

头部

footer.html 底部页面


    
    
       
   
index.html 正文页面



    
    

正文部分

注意
load函数里最好不要写本地的文件,容易引起跨域问题导致浏览器找不到页面,我这里是用域名来解决的
方法二:实现
方法三:HTML5 中的 标签
注意:
方法二和方法三必须设置宽和高,高必须固定,设置auto会出现页面显示不完整的情况。(亲测方法三会出现滚动条)。个人认为方法一在静态页面中的使用比较合适

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106852.html

相关文章

  • HTML 代码复用实践

    摘要:安装好之后,来简单的组织一下文件的目录生产环境的存放文件夹公共部分的存放文件夹编辑后的文件在新建的,配置好接着新建两个文件,分别是头部和底部这是的内容这是的内容最后在新建一个,把要用到的和给进来。 前言 通常我们所做的一些页面,我们可以从设计图里面看出有一些地方是相同的。例如:头部,底部,侧边栏等等。如果是制作静态页面的同学,对于这些重复的部分只能够通过复制粘贴到新的页面来,如果页面...

    Profeel 评论0 收藏0
  • 利用ajax 引入静态公共头部底部

    摘要:利用引入公共的头部与底部或者多个页面需要用到的重复的组件,对于新入门的前端来说是很实用的方法,自己也是新手菜鸟一枚,折腾了好久,实现的方法有很多种,这是我个人觉得比较简单方便的首先得把公用的头部与底部分开创建模板,,这里我举例主页面引入头 利用ajax引入公共的头部与底部或者多个页面需要用到的重复的组件,对于新入门的前端来说是很实用的方法,自己也是新手菜鸟一枚,折腾了好久,实现的方法有...

    adam1q84 评论0 收藏0
  • 利用ajax 引入静态公共头部底部

    摘要:利用引入公共的头部与底部或者多个页面需要用到的重复的组件,对于新入门的前端来说是很实用的方法,自己也是新手菜鸟一枚,折腾了好久,实现的方法有很多种,这是我个人觉得比较简单方便的首先得把公用的头部与底部分开创建模板,,这里我举例主页面引入头 利用ajax引入公共的头部与底部或者多个页面需要用到的重复的组件,对于新入门的前端来说是很实用的方法,自己也是新手菜鸟一枚,折腾了好久,实现的方法有...

    weakish 评论0 收藏0
  • 打造一个“精致”个人博客

    摘要:百度统计先注册个百度统计的账号站长账号,适合个人博客,注册成功后按照提示,把代码复制到中的的标签里这里特指我的博客文件好了,这样你的博客就差不多了,是不是感觉很酷今天就到这儿,下篇文章见。 我为什么要写博客?其实我最初打算写博客,原因很简单,我就是想把工作中、学习中遇到 的问题及解决方案记录下来,它能帮你梳理下整个过程的要注意的地方,写写你在工作中遇到的问题,用来记录和回顾。Tips:...

    用户83 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<