前端开发必备（八）--------导航框架

最新推荐文章于 2024-05-04 09:36:56 发布

ThinkPet

最新推荐文章于 2024-05-04 09:36:56 发布

阅读量1.4k

点赞数 1

分类专栏： WEB前端文章标签：导航框架 frameset frame

本文链接：https://blog.csdn.net/ThinkPet/article/details/81806293

版权

WEB前端专栏收录该内容

32 篇文章 1 订阅

订阅专栏

1.主页面index.html

<html>
    <!-- frameset导航框架 -->
    <!-- 外层上下结构，以行rows为分界，上10%，下90% -->
<frameset rows="10%,90%">

    <frame src="top.html">


    <!-- 内层左右结构，以列cols为分界，左边120px,右边* -->
    <frameset cols="120,*">
        <!-- 左侧为contents.html导航条框架 -->
        <frame src="contents.html">
        <!-- 右侧为内容显示框架，可以把默认要显示的页面写到src属性中，这样一打开就显示该页面 -->
        <frame src="2.html" name="showframe">
        
    </frameset>

</frameset>

</html>

2.top页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>top</title>
</head>
<body>
    top
</body>
</html>

3.left frame

<html>

<body>
<!-- 该页为导航条，只要设置超链接即可 -->
<a href="2.html" target="showframe">2</a><br/>

<a href="http://www.baidu.com" target="showframe">3</a><br/>

<a href="4.html" target="showframe">4</a>

</body>

</html>

4.内容页

2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <title>Document</title>
</head>
<body>
    英雄联盟
</body>
</html>

3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <title>Document</title>
</head>
<body>
    
    <!-- <a href="http://www.baidu.com">百度</a> -->
</body>
</html>

4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <title>Document</title>
</head>
<body>
    网页开发
</body>
</html>

ThinkPet

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端开发必备（八）--------导航框架

1.主页面index.html&lt;html&gt; &lt;!-- frameset导航框架 --&gt; &lt;!-- 外层上下结构，以行rows为分界，上10%，下90% --&gt;&lt;frameset rows="10%,90%"&gt; &lt;frame src="top.html"&gt; &lt;!-- 内
复制链接

扫一扫