frameset的基础使用方法

最新推荐文章于 2022-03-27 07:20:31 发布

Galadyal鸭

最新推荐文章于 2022-03-27 07:20:31 发布

阅读量3.3k

点赞数 7

分类专栏： H5

本文链接：https://blog.csdn.net/weixin_51092099/article/details/118567817

版权

H5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

如何使用frameset完成网页布局(H5)

提示：新手发车

frameset的作用：

1.1 frameset可以把一个主网页分成多个自定义比列的子网页（PS：使用了frameset就不能再使用body）

使用frameset cols把当前网页垂直分割成比例为50% ：50%的a,b两个子网页，若要横切，使用rows：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <frameset cols="50%,50%" border="0">
        <frame src="./a.html" >
        <frame src="./b.html">  
    </frameset>
</html>

1.2 然后可以分别编写子网页（这边我只设置了子网页的背景颜色)

a子网页代码如下（示例）：

<body style="background-color: blue;">
    
</body>

b子网页代码如下（示例）：

<body style="background-color: red;">
    
</body>

1.3 打开主网页，效果如下

在这里插入图片描述

1.4 可以嵌套使用，代码与实现效果如下


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <frameset cols="50%,50%" border="0">
        <frame src="./a.html">
            <frameset rows="50%,50%">
                <frame src="./b.html">  
                <frame src="./c.html"> 
            </frameset>
    </frameset>
</html>

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

2.1 可以在frameset中设置name关键字，来实现其它网页在目标子网页中打开

先配置name：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <frameset cols="50%,50%" border="0">
        <frame src="./a.html" name="a">
        <frame src="./b.html" name="b">  
    </frameset>
</html>

2.2 常规的超链接跳转与运行结果图(未使用target)：

在b子网页中加上到c的超链接：

<body style="background-color: blue;">
    <a href="./c.html">点我跳转到c</a>
</body>

在主网页中运行结果如下：
在这里插入图片描述
点击超链接后

2.3 修改b代码(使用target)：

设置其在name=“a"的子网页中跳转到c子网页

<body style="background-color: red;">
    <a href="./c.html" target="a">点我跳转到c</a>
    
</body>

设置其在name=“a"运行效果图：
在这里插入图片描述
成功实现了c网页超链接代码在b子网页，但点击后却在a子网页中打开

PS：新手上路，请多指教