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>