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

最新推荐文章于 2022-10-09 21:54:58 发布

园长的牧歌

最新推荐文章于 2022-10-09 21:54:58 发布

阅读量6.1k

点赞数 1

分类专栏： # HTML/CSS 文章标签： iframe 内联框架页面显示网页

本文链接：https://blog.csdn.net/weixin_42119415/article/details/83216258

版权

HTML/CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

园长的牧歌

关注

1
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
0
评论
网页的一个页面中显示另一个页面

1、定义内联框架：HTML内联框架是为了实现在网页中显示网页，突出了内联二字，就是在一个网页中，我们能够控制在这个网页中用多大的框去显示另外一个网页，并且能通过CSS对其进行控制。2、两种应用场景：（1）固定右侧或左侧按钮，修改另一侧或网页中某个部分的内容（2）网站中很多页面都用到相同的代码，例如页脚3、使用&lt;iframe&gt;编写footer.html用来公用的页...
复制链接

扫一扫