网页的一个页面中显示另一个页面

1、定义

内联框架：HTML内联框架是为了实现在网页中显示网页，突出了内联二字，就是在一个网页中，我们能够控制在这个网页中用多大的框去显示另外一个网页，并且能通过CSS对其进行控制。

2、两种应用场景：

（1）固定右侧或左侧按钮，修改另一侧或网页中某个部分的内容

（2）网站中很多页面都用到相同的代码，例如页脚

3、使用<iframe>

编写footer.html用来公用的页脚

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>poesy_footer</title><link href="css/footer.css" rel="stylesheet" type="text/css">
</head>
<body>
<footer><div class="footer_me"><a>关于我</a><em>·</em><a>我的博客</a><em>·</em><a>联系我</a><em>·</em><a>关于我</a><em>·</em><em>·</em></div><p>Copyright 2018*** All Rights Reserved<a href="http://www.miitbeian.gov.cn/" target="_blank">*ICP备*******号</a></p>
</footer>
</body>
</html>

css修饰：

footer{width: 100%;margin: 1em auto;
}
footer > .footer_me{width: 50%;font-size: 14px;margin: 0px auto;color: #787878;
}
footer > p{font-size: 12px;width: 60%;margin: 0px auto;color: #787878;
}

到需要用到网页进行引用：<iframe>这里面写的字是防止不识别浏览器标签，做的预防性替换文本</iframe>

<footer><iframe src="../footer.html"><p>Copyright 2018*** All Rights Reserved<a href="http://www.miitbeian.gov.cn/" target="_blank">**ICP备******号</a></p></iframe>
</footer>

引用网页css修饰：

/*-----------------------------------------------------脚部css*/footer{width: 100%;}footer > iframe{width: 100%;height: 4.5em;border: 0px;}

4、大功告成。

网页的一个页面中显示另一个页面相关推荐

27、HTML框架（同一个浏览器窗口中显示不止一个页面）
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面. <iframe src="https://www.17173.com/" width="500" ...
ercharts一个页面能放几个_在同一页面中显示多个echart图表
整理了一下大概有两种做法来实现在同一个页面中显示多个echart图表,废话不说直接上代码. 在同一个echart对象中绘制多个图表 echart .chart { width: 1500px; } i ...
HTML5怎么编辑另一个页面,html中嵌套iframe页面如何将一个html页面中嵌入另一个html页面...
如何将一个html页面中嵌入另一个html页面将一个html页面中嵌入另一个html页面需要使用到iframe标签. iframe标签用法: scrolling禁止鼠标滑动,frameborder嵌 ...
html5 载入另一个页面,如何将一个html页面中嵌入另一个html页面
将一个html页面中嵌入另一个html页面需要使用到iframe标签. iframe标签用法: scrolling禁止鼠标滑动,frameborder嵌套页面边框,leftmargin左边距,topm ...
路由到另外一个页面_如何在多个页面中，引入一个公共组件
应用场景在前端开发的过程中,时常有这样的一个需求,需要将某个组件,展示在不同的页面中.常见的有,头部菜单栏.底部版权,如下图中的菜单,就需要在不同页面中进行显示. 解决方法假设有这样一个需求,希望 ...
php json转数组后并在前端展示,0516-如何从服务器端获取JSON格式字符串并解决到前端页面中显示...
一. 如何从服务器端获取JSON格式字符串并解决到前端页面中显示 1.采用AJAX异步方式从服务器请求必须为字符串的数据:例如 $PHP= '{"aaa":"bbb&q ...
java错误页面显示错误信息_Struts2在JSP页面中显示错误信息和提示信息的方法
Struts2在JSP页面中显示错误信息和提示信息的方法主要有以下四种. 注意:以下四种方法均需要使Action类继承ActionSupport类. 一.域级错误信息 ①重写Action中的valid ...
IT兄弟连 JavaWeb教程使用Servlet实现在页面中显示随机数
在com.xdl.servlet包下定义RandomServlet类并HttpServlet类,在该类中生成随机数并发送给客户端.RandomServlet类详细代码如下: package com.x ...
android点击另一个app,Android 怎么从一个APP中打开另外一个APP
Android 如何从一个APP中打开另外一个APP 众所周知,在一个APP内部,从一个页面跳转到另外一个页面是使用startactivity函数来实现的. 同样的,对于应用之间的跳转也是如此的.应用 ...

网页的一个页面中显示另一个页面

网页的一个页面中显示另一个页面相关推荐

最新文章

热门文章