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/" 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/" target="_blank">**ICP备******号</a>
        </p>
    </iframe>
</footer>

引用网页css修饰:

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

4、大功告成。

更多推荐

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