使用iframe标记在页面中嵌入浮动框架

最新推荐文章于 2022-03-04 15:31:42 发布

_抛锚#

最新推荐文章于 2022-03-04 15:31:42 发布

阅读量1.4k

点赞数

分类专栏： web前端文章标签： html css

本文链接：https://blog.csdn.net/weixin_44949150/article/details/116076652

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

浏览器窗口含有孤立的子窗口称为浮动框架

基本语法：

<iframe 属性名称="属性值" name="框架名称" src="资源路径"></iframe>
<a href="资源路径" target="属性值">链接标题</a>

a标签中target属性：
在这里插入图片描述
浮动框架属性：

样例代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>浮动框架应用</title>
        <style type="text/css">
            a{width: 300px; margin: 0 10px;}
            h3{font-size: 28px; color: #00f; text-align: center;}
            div{margin: 0 auto; text-align: center;}
        </style>
    </head>
    <body>
        <div>
            <h3>浮动框架应用</h3>
            <hr color="red">
            <iframe name="leftiframe" src="https://www.tsinghua.edu.cn/" width="300px" height="300px"></iframe>
            &nbsp;&nbsp;
            <iframe name="rightiframe" src="https://www.whu.edu.cn/" width="300px" height="300px"></iframe>
            <p>
                <a href="https://www.bilibili.com/" target="leftiframe">在左边浮动框架内显示B站官网</a>
                <a href="https://www.csdn.net/" target="rightiframe">在右边浮动框架内显示csdn官网</a>
            </p>
        </div>
    </body>
</html>

运行效果：
在这里插入图片描述

_抛锚#

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
使用iframe标记在页面中嵌入浮动框架

浏览器窗口含有孤立的子窗口称为浮动框架基本语法：<iframe 属性名称="属性值" name="框架名称" src="资源路径"></iframe><a href="资源路径" target="窗口名称">链接标题</a>浮动框架属性：样例代码：...
复制链接

扫一扫