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、大功告成。